Bouclage de fondu sans fin avec l'effet de retournement de l'image jQuery

Question

mon intention était de remplacer les images par un joli effet de fondu: J'ai une image A comme arrière-plan. au survol de la souris, image B fadeIn. sur la souris, l'image B fadeOut et nous pouvons voir l'image A à nouveau. J'utilise ce code:

<script type='text/javascript'> 
    $(function() { 
      $("img.fade") 
       .mouseover(function() { 
       $(this).fadeOut(2000);       
       }) 
       .mouseout(function() { 
       $(this).fadeIn(2000);         
       }); 
    });  
</script> 

mais le problème est que, lorsque le séjour de l'utilisateur sur le vol stationnaire, il continue à boucle (fadeIn, fadeOut, fadeIn, fadeOut ..). Je le veux quand le fondu se termine. Lorsque l'utilisateur quitte la souris, je veux juste que le nouveau fondu se produise. Merci!

p C'est le code de travail pour l'utilisation de 2 images. C'est une solution différente au problème et je l'ai trouvé après que ma question soit résolue.

<script type='text/javascript'> 
$(function() { 

    $('img.fade').hover(function() { 
    var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg"; 
    $(this) 
     .animate({opacity:0},0) 
     .attr('src',src) 
     .stop() 
     .animate({opacity:1},1000); 
    }, function() { 
    var src = $(this).attr("src").replace("_over", ""); 
    $(this) 
     .animate({opacity:0},0) 
     .attr('src',src) 
     .stop() 
     .animate({opacity:1},500); 
    }); 
}); 
</script> 

Answer 1

Essayez ce code:

$(function() { 
     $("img.fade") 
      .mouseover(function() { 
      $(this).fadeTo('2000', 0);       
      }) 
      .mouseout(function() { 
      $(this).fadeTo(2000, 1);         
      }); 
}); ​ 

Le problème est que la fonction fadeOut() définit la propriété d'affichage de votre élément sans pareil, de sorte que le DOM pense que votre souris ne soit plus en interaction avec le élément, et appelle la fonction fadeIn(). Il boucle en permanence. La fonction fadeTo modifie l'opacité, mais elle ne permet pas vraiment de faire passer l'image. Il faut deux paramètres, durée et opacité.

Answer 2

Il me semble que l'image disparaît une fois qu'elle disparaît, ce qui déclencherait la fonction de sortie du clavier. Essayez d'animer l'opacité .01.

Answer 3

$(function() { 
    var img = ['imageA.jpg','imageB.jpg'] 
    $('img.fade').hover(function() { 
    $(this) 
     .animate({opacity:0},0) 
     .attr('src',img[1]) 
     .stop() 
     .animate({opacity:1},1000); 
    }, function() { 
    $(this) 
     .animate({opacity:0},0) 
     .attr('src',img[0]) 
     .stop() 
     .animate({opacity:1},1000); 
    }); 
}); 

Vous pouvez essayer here

Ref: .hover(), .stop()

Answer 4

Si vous ne voulez pas changer dynamiquement l'image et vraiment veulent continuer en utilisant une image de fond, vous pouvez profiter de l'événement bubblin g ...

HTML:

<div class="myClass" style="background: url(imageA.jpg);"> 
    <img src="imageB.jpg" /> 
</div> 

jQuery:

$('.myClass').hover(function(){ 
    $(this).find('img').fadeOut(2000); 
}, function(){ 
    $(this).find('img').fadeIn(2000); 
}) 

Untested laissez-nous savoir si cela fonctionne ou non.

Answer 5

Pour d'autres ont également conduit ici par

Google+(Ignorance||rum) = me. 

mouseenter + mouseleave pourrait aider à un comportement semi-boucle étrange que vous pensiez peut travailler par exemple

var someElements = $('div.event-cell'); 

      someElements.mouseenter(function() { 
       var targets= calEvents.not(this); 
       targets.fadeTo(1000, 0.3); 
      }).mouseleave(function() { 
       var targets = someElements.not(this); 
       targets.fadeTo(1000, 1); 
      }); 

Semble et mouseover mouseout sont plus compris que vous pourriez penser par exemple mouseout inclut des éléments enfants.

I think = layman's opinion after rum :) 

Voir la section de démonstration http://api.jquery.com/mouseover/