For for jQuery

Navigation
2

So, I have in all 4 divs that I want to be changed when the mouse passes and when the mouse leaves it. The effect I wanted to do worked out, but I wanted to lower the code so that it would be easier to maintain, so I'm here. I'm going to pass the javascript code and the two blocks I'm trying to do this for. Also another question, this effect does not leave the application too heavy for the user, or does it? Thanks

JS 

$('#bloco1').mouseenter(function (){
      $('.fraseBloco1').stop().fadeOut(0);
      $('.imgBloco1').stop().fadeOut(0);
      $('.conteudoBloco1').stop().fadeIn(1000);
    });
    $('#bloco1').mouseleave(function (){
      $('.conteudoBloco1').stop().fadeOut(0);
      $('.fraseBloco1').stop().fadeIn(1000);
      $('.imgBloco1').stop().fadeIn(1000);
    });

HTML 

<div class="bloco1" id="bloco1">
                    <img class="imgBloco1" src="" />IMAGEM DO BLOCO
                    <p class="fraseBloco1">AQUI É TIPO UM TITULO</p>
                    <span class="conteudoBloco1" style="display: none;">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
                </div>
    
asked by anonymous 25.08.2014 / 21:09

3 answers

2

Make a suggestion with CSS only: 

.bloco1 > * {
    opacity: 1;
    transition: opacity 1s;
}
.bloco1:hover > p, .bloco1:hover > img {
    opacity: 0;
}
.bloco1:hover > .conteudoBloco1 {
    opacity: 1;
}

You may still have to add position: relative; to the .bloco1 element.

This is the best way from the point of view of code simplicity and performance.

Example: link

    
25.08.2014 / 22:59
1

HTML: 

<div class="blocos" id="bloco1">
    <img class="imgBloco1 item-bloco" src="" />IMAGEM DO BLOCO
    <p class="fraseBloco1 item-bloco">AQUI É TIPO UM TITULO</p>
    <span class="conteudoBloco1 desc-bloco">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
</div>

JS: 

$('.blocos').hover(
    function() {
        $(this).find('.item-bloco').stop().fadeOut(0);
        $(this).find('.desc-bloco').stop().fadeIn(1000);
    },
    function() {
        $(this).find('.desc-bloco').stop().fadeOut(0);
        $(this).find('.item-bloco').stop().fadeIn(1000);
    }
);
    
25.08.2014 / 21:22
0

A cleaner way to do it, without so many classes and ids:

HTML: 

<div class="bloco">
    <img class="imgBloco" src="" />
    <p class="fraseBloco">AQUI É TIPO UM TITULO</p>
    <span class="conteudoBloco" style="display: none;">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
</div>

jquery: 

$('.bloco').hover(function () {
    $(this).children('.imgBloco, .fraseBloco').stop().hide();
    $(this).children('.conteudoBloco').stop().fadeIn(1000);
}, function () {
    $(this).children('.imgBloco, .fraseBloco').stop().fadeIn(1000);
    $(this).children('.conteudoBloco').stop().hide();
});

See working on JSFiddle .

    
25.08.2014 / 23:06
Open .txt file as tooltip GlassFish error message