jQuery: Fade out de l'opacité actuelle

Question

Je passe d'un objet de 0% à 100% sur mouseOver, et disparaît à 0% sur mouseOut.

Quand je fais une mouseIn et mouseOut rapide, l'effet « sauts », car mouseOut est sortie en fondu de 100% - et parce que je fais un mouseIn et mouseOut rapide, le fade in ne se fane pas tout le chemin à 100% . Peut-être que cela ne fait que passer à 25 ou 10%.

Ma question est: Comment est-ce que je peux faire que le fondu se fane seulement du pourcentage spécifique?

Si le fadeIn ne reçoit que 20, le fadeOut devrait fadeOut de 20.

Answer 1

Vous pouvez essayer de faire:

$('#element').animate({opacity:0}); 

... au lieu de fadeOut().

Answer 2

Je ne suis pas sûr de ce que votre code actuel ressemble, mais vous aurez envie d'utiliser la fonction .animate() jQuery:

Voici un exemple:

$('#object').mouseover(function() { 
    $(this).animate({ 
    opacity: 1, 
    }, 1000, function() { 
    //completion code? 
    }); 
}); 

$('#object').mouseout(function() { 
    $(this).animate({ 
    opacity: 0, 
    }, 1000, function() { 
    //completion code?? 
    }); 
}); 

Answer 3

J'ai eu ce même problème il était une fois. Vous ne pouvez pas vraiment utiliser les fonctions animées de jQuery car elle veut toujours compléter l'animation. Alors, je l'ai écrit ma propre fonction pour elle .. espère que cela aide (aussi je ne m'y attendais pas à partager ce jour, il a été écrit pour être adapté à la façon dont je l'utilise):

//Custom fade effects. 
//Similar to jQuery's fadeIn & fadeOut 
//Except that it doesn't queue animations, and can cut the animation short at anytime 
//Highly useful for quickly hovering over elements and desiring the fade effects to be cut on hover in/out. 

function fade(elem, interval) 
{ 
    if(!(elem instanceof $)) { 
     elem = $(elem); 
    } 

    if(elem.is(':not(:visible)')) { 
     elem.css('opacity', '0').show(); 
    } 

    elem.css('opacity', function() { 
      var current = $(this).data('fadeLevel') || 0; 

      //normalize - accounts for tiny descrepancies in parsing 
      if(current < 0) { current = 0; } 
      if(current > 1) { current = 1; } 

      $(this).data('fadeLevel', current + interval) 

      return $(this).data('fadeLevel'); 
     }); 

    if(elem.data('fadeLevel') < 0 || elem.data('fadeLevel') > 1) { 
     clearTimeout(elem.data('fadeTimer')); 
    } 
} 

function fadeIn(elem) { fadeTo(elem, 0.04, 0); } 
function fadeOut(elem) { fadeTo(elem, -0.04, 1); } 
function fadeTo(elem, interval, level) { 
    if(!$(elem).data('itemOpen')) { 
     clearTimeout($(elem).data('fadeTimer')); 
     $(elem).data('fadeLevel', level).data('fadeTimer', setInterval(function() { fade(elem, interval) }, 30)); 
    } 
} 

Exemples

http://jsfiddle.net/3AxHb/

Answer 4

Utilisez jQuery's .fadeTo() method qui vous permet de définir une opacité cible.

$('selector').fadeTo('slow', 1); 
$('selector').fadeTo('slow', 0); 

Le premier argument est la vitesse, le second est l'opacité.

---

Si vous utilisez .hover(), vous pouvez le faire comme ceci:

Exemple:http://jsfiddle.net/ecUdS/

$('selector').hover(function(evt) { 
    $(this).stop().fadeTo('slow', evt.type === 'mouseenter'); 
}); 

Ce uses .stop() pour arrêter l'animation si elle est en cours d'exécution.

Alors because .hover() sera le feu pour les deux mouseenter et mouseleave, j'ai ajouté un test où si elle est un mouseenter, il envoie true (qui équivaut à 1). Sinon, il envoie false ou 0.