jQuery - fadeIn (), fadeOut (), animate (), stop () и мигание - PullRequest
Новая
       28

jQuery - fadeIn (), fadeOut (), animate (), stop () и мигание

3 голосов
/ 09 июля 2011

Когда «hover» вызывает этот код: 

jQuery('#test').animate({opacity: 1},300);

И пользователь очень быстро наводит курсор на элемент «#test» и мигает в течение длительного времени (разумеется, непрозрачность анимируется до 1 при наведении и до 0 при наведении).

Добавление stop () всегда работало для меня: 

jQuery('#test').stop().animate({opacity: 1},300);

Дело в том, что я должен использовать fadeIn () и fadeOut (), и я не уверен, как избежать мигания в этом случае?

Живой пример: http://jsfiddle.net/caHq5/ (очень быстро переместите указатель из темного квадрата в фон, затем в квадрат, затем в фон и т. Д.). stop () ничего не делать.

Ответы [ 3 ]

5 голосов
/ 09 июля 2011

Это тот эффект, который вы получили после? 

jQuery(document).ready(function() {    
    jQuery('#container').hover(function(){
        jQuery('#wrong').stop().fadeTo(200,1);
            },function() {
        jQuery('#wrong').stop().fadeTo(200,0);
            });
});

Если вы действительно хотите, чтобы элемент был скрыт после его исчезновения, а не просто невидимым: 

jQuery(document).ready(function() {    
    jQuery('#container').hover(function(){
        jQuery('#wrong').stop().show().fadeTo(200,1);
            },function() {
        jQuery('#wrong').stop().fadeTo(200,0, function() {$(this).hide()});
            });
});
0 голосов
/ 09 июля 2011

Добавляя к решению "Wordpressor", я придумал следующее:

http://jsfiddle.net/VTG3r/25/

jQuery(document).ready(function()
{
    // Perform events when mouse enters the container.
    jQuery( "#container" ).bind( "mouseenter", function()
    {
        // Stop any previous animations and fade in.
        jQuery( "#test" ).stop().animate({ "opacity": 1 }, 300);
        jQuery( "#wrong" ).stop().fadeTo( 300, 1 );
        jQuery( "#OK" ).stop().animate({ "opacity": 1 }, 300);
    });
    // Perform events when mouse leaves the container.
    jQuery( "#container" ).bind( "mouseleave", {}, function()
    {
        // Stop any previous animations and fade out.
        jQuery( "#test" ).stop().animate({ "opacity": 0 }, 300);
        jQuery( "#wrong" ).stop().fadeTo( 300, 0 );
        jQuery( "#OK" ).stop().animate({ "opacity": 0 },300);
    });
});
0 голосов
/ 09 июля 2011

Я верю, что это может сработать. 

jQuery(document).ready(function() {    
    jQuery('#container').hover(function(){
        jQuery('#wrong').clearQueue().fadeTo(400, 1);
            },function() {
        jQuery('#wrong').clearQueue().fadeTo(400, 0);
            });   
});
...