Я использую функцию jQuery .scroll(), почему я не могу переопределить ее эффекты с помощью другой функции?

Question

Я использую функцию jQuery .scroll(), чтобы сделать некоторый элемент исчезать до 0,2 непрозрачности. Поскольку нет встроенного индикатора «scrollstop», я решил заставить элемент исчезать до 1.0 непрозрачности при наведении. Однако это не работает.

Вот мой код:

$(document).ready(function() { 
$(window).scroll(function() { 
    $("#navlist").animate({ opacity: 0.2 }, 2000); 
}); 

$("#navlist").hover( 
    function() { 
     $(this).animate({ opacity: 1 }, 500); 
    }, function() { 
     $(this).animate({ opacity: 1 }, 500); // just to be safe? 
    } 
); 
}); 

Когда я перечисляю, то #navlist элемент исчезает, а при наведении на него ничего не происходит. Но если вы обновляете страницу, когда вы на полпути вниз, элемент автоматически исчезает, как только вы обновляетесь, прежде чем я прокручу, и если вы попытаетесь навести его на увядание, ничего не произойдет.

Любые мысли?

Answer 1

Проблема заключается в том, что событие прокрутки вызывается несколько раз в течение одного прокрутки (10-20 на прокрутку колеса мыши), поэтому #navlist получает много событий анимации в 2 секунды.

Я не совсем уверен, что происходит с jQuery, но когда вы его наводите, несмотря на то, что анимация opacity: 1 запускается, они запускают очереди #navlist.

Я решил проблему с помощью своего рода флага, готов поспорить, вы можете найти что-то более эффективное.

$(document).ready(function(){ 
    var isAnimationBusy = false; 
    $(window).scroll(function(){ 
     if(isAnimationBusy) return; 
     isAnimationBusy = true; 
     $("#navlist").animate(
     { opacity: 0.2 }, 2000, 
     function(){ isAnimationBusy = false; } 
    ); 
    }); 

    $("#navlist").hover(
     function(){ 
     isAnimationBusy = false; 
     $(this).stop().animate({ opacity: 1 }, 500); 
     }, 
     function(){ 
     isAnimationBusy = false; 
     $(this).stop().animate({ opacity: 1 }, 500); 
     } 
    ); 
}); 

Edit: анимация остановка будет решить эту проблему, я до сих пор считаю, вы должны контролировать, сколько раз вы назвали событие одушевленным. Там может быть удар производительности.

Answer 2

пытаются остановить анимацию первый

$(document).ready(function() { 
$(window).scroll(function() { 
    $("#navlist").stop().animate({ opacity: 0.2 }, 2000); 

}); 
$("#navlist").hover(function() { 
    $("#navlist").stop().animate({ opacity: 1.0 }, 500); 
}, 
function() { 
    $("#navlist").stop().animate({ opacity: 1.0 }, 500); 
} 
);