jQuery - Verblassende Animation auf schweben

Question

ich ein wenig jQuery Animation haben, die in einem Link verblasst, wenn schwebt ein:

$(function() { 
    $('.delete').hide(); 
    $('#photos img').hover(function() { 
    $(this).parents('li').children('.delete').fadeIn('fast'); 
    }, function() { 
    $(this).parents('li').children('.delete').fadeOut('fast'); 
    }); 
}); 

Aber wenn ich schnell meine Maus in das und aus dem Bild bewegen, ist die neue Animation immer hinzugefügt, um die Warteschlange und wenn ich stoppe kann ich den Link für eine Weile pulsieren sehen. Ich habe versucht mit .stop (true), aber manchmal funktioniert der Einblendeffekt überhaupt nicht (oder nur bis zu einem Deckkraftwert von weniger als 1). Was kann ich tun?

Danke, Eric

Answer 1

Der beste Weg ist hoverIntent Plugin zu verwenden. Dies befasst sich mit den oben genannten Punkten. Es fügt auch eine leichte Verzögerung zu der Animation hinzu, also wenn ein Benutzer die Maus schnell über alle Verbindungen bewegt, erhalten Sie keinen hässlichen Animationsfluss aller Verbindungen.

Answer 2

Eine Möglichkeit, solche Probleme zu verhindern, ist vorkommendes stop() in Verbindung mit fadeTo() zu verwenden, wie im Snippet unten:

$(function() { 
    $('.delete').fadeTo(0, 0); 
    $('#photos img').hover(function() { 
    $(this).parents('li').children('.delete').stop().fadeTo('fast', 1); 
    }, function() { 
    $(this).parents('li').children('.delete').stop().fadeTo('fast', 0); 
    }); 
}); 

Hoffnung das Ihr Problem löst!