我正在使用jQuery .scroll（）函數，爲什麼我不能用另一個函數覆蓋它的效果？

我使用jQuery .scroll（）函數使某個元素淡入到0.2不透明度。由於沒有原生的「scrollstop」指示器，我決定讓元素在盤旋時恢復到1.0不透明度。但是，它不起作用。我正在使用jQuery .scroll（）函數，爲什麼我不能用另一個函數覆蓋它的效果？

這裏是我的代碼：

$(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元素變淡，但是當你將鼠標懸停在它沒有任何反應。但是，如果在半路向下時刷新頁面，則在刷新之前，元素會自動消失，在滾動之前，如果嘗試將其懸停以淡入，則不會發生任何反應。

有什麼想法？

來源

2010-04-16 rhodesjason

問題是滾動事件在單個滾動過程中被調用了多次（每個鼠標滾輪滾動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); 
     } 
    ); 
});

編輯：動畫停止將解決這個問題，我仍然相信你應該控制你多少次調用動畫事件。可能會有性能問題。

來源

2010-04-16 06:22:04 guzart

你倆是正確與.stop（）調用。我也使用了這個標誌，因爲我認爲你不斷地調用滾動來表現你的表現是正確的。謝謝。 – rhodesjason 2010-04-16 15:35:05

試圖阻止動畫第一

$(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); 
} 
);

來源

2010-04-16 06:24:50 Reigel

我正在使用jQuery .scroll（）函數，爲什麼我不能用另一個函數覆蓋它的效果？

回答

相關問題