Go to jQuery

Asked

Viewed 65 times

3

So, I have all 4 Ivs that I want to be changed when the mouse passes and when the mouse leaves it. The effect I wanted to make worked, but I wanted to decrease the code to make it easier to maintain, so here I am. I’ll pass the javascript code and the two blocks I’m trying to do this for. Also another question, this effect does not leave too heavy the application for the user, or let? Thank you

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>
jquery

  • Is this what you look like now? http://jsfiddle.net/oem6e6uw/

  • type http://jsfiddle.net/oem6e6uw/2/

  • Okay. Is this what you’re looking for? http://jsfiddle.net/oem6e6uw/3/

  • Perfect, thank you very much.

  • But this won’t have a problem with IE 7?

  • IE7 is history. Microsoft has even stopped officially supporting IE8. But if you want to join filter: alpha(opacity=0); but I wouldn’t do it.

Show 1 more comment

3 answers

2


Get a hint 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 join position: relative; to the element .bloco1.

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

Example: http://jsfiddle.net/oem6e6uw/3/

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);
    }
);
  • 2

    It is. You get the tip of a CSS-only solution if the position of the elements can be fixed: http://jsfiddle.net/b06jy67a/

  • It did not work, because what will appear will be in place of what comes out, are also in the case 4 blocks with the same requirement

  • That’s why I talked about fixing the positions. Basically, that’s what Sergio did in his answer.

0

A cleaner way of doing 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.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.