jquery - 如果/否则无法正常工作

Question

想要根据 if/else 的 scroll() 检查隐藏或显示 div。我的剧本是这样的。

$(window).scroll(function () {

if($(this).scrollTop() > 400){

            $("#div1").delay(100).fadeIn();
            $("#div2").delay(200).fadeIn();
            $("#div3").delay(300).fadeIn();
            $("#div4").delay(400).fadeIn();
            $("#div5").delay(500).fadeIn();
} else
    $(".task-bubble").css("display", "none");

});

看看 JSFiddle http://jsfiddle.net/NXVTw/

它在 if 上工作 gr8，但在 else 下工作不正常

如果 scrolltop() > 400 则显示 else 无显示，但是当我 srcoll 滚动条高于 400 时，它并不完美，请看一下。

任何建议。

Answer 1

每次触发滚动事件时，您都会淡化元素。

尝试检测if语句的结果是否发生变化：

(function() {
    var scrolled = false;
    $(window).scroll(function() {
        var pos = $(this).scrollTop() > 400;
        if( pos != scrolled) {
            if( pos) {
                $("#div1").delay(100).fadeIn();
                // ...
            }
            else $(".task_bubble").css("display","none");
            scrolled = pos;
        }
    });
})();

Answer 2

您需要停止 fadeIn() 动画并使用 stop(true) 清除队列：

http://jsfiddle.net/NXVTw/2/

$(".task-bubble").stop(true).css("display", "none");

Answer 3

$(window).scroll(function (e) {
if($(this).scrollTop() > 400){
$("#div1").delay(100).fadeIn();
$("#div2") .delay(200).fadeIn();
$("#div3").delay(300).fadeIn();
$("#div4").delay(400).fadeIn();
$("#div5" ).delay(500).fadeIn();
e.preventDefault();
} else
$(".task-bubble").css("display", "none");

});

在 if 条件下使用 e.preventDefault()。

Answer 4

$(window).scroll(function () {

if($(this).scrollTop()) > 400){

            $("#div1").delay(100).fadeIn();
            $("#div2").delay(200).fadeIn();
            $("#div3").delay(300).fadeIn();
            $("#div4").delay(400).fadeIn();
            $("#div5").delay(500).fadeIn();
} 
else {
    $(".task-bubble").css("display", "none");
}
});

试试看。