jQuery animate和scrollTop

Question

我希望根据$(window).scrollTop()是大于还是小于固定值来执行两个动画，比如705

所以代码是

$(window).scroll(function(){
    var scroll = $(window).scrollTop();
    $("#scroll").html(scroll);
    if (scroll < 705){
        $("#box").animate({"height":"100px"});
    }
    if(scroll > 705){
        $("#box").animate({"height":"300px"});
    }
});

但div id='box'只有一个第一个动画而不是第二个动画。如果我使用.css而不是animate，它就有效。那么这里发生了什么？

Answer 1

您需要先停止现有动画。此外，使用标志或检查现有高度会更有效，以避免多次重新应用新样式。

$(window).scroll(function(){
    var scroll = $(window).scrollTop();
    $("#scroll").html(scroll);
    if(scroll > 705){
        $("#box").stop(true, false).animate({"height":"300px"});
        return;
    }

    else if (scroll < 705){
        $("#box").stop(true, false).animate({"height":"100px"});
    }

});

Answer 2

http://jsfiddle.net/jCMBc/1/

$(document).ready(function() {
    $(window).scroll(function(){
    var scroll = $(window).scrollTop();
    $("#scroll").html(scroll);
    if (scroll < 705){
        $("#box").stop().animate({height: "100"}, 2000);
    }
    else {
        $("#box").stop().animate({height: "300"}, 2000);
    }
});   
});

嗯。我想你不需要jQueryUI。如此更新的小提琴。我确实添加.stop()来阻止每个卷轴冒泡。我还给出了2000的动画时间，等于2 seconds。我刚刚将您的第二个if更改为else。

Answer 3

jQuery animate（）具有默认持续时间（默认值：400）。

虽然css（）没有。

http://api.jquery.com/animate/

做你需要的。查看animate（）的完整选项

http://api.jquery.com/animate/#animate-properties-options