Question

在div中我正在放置一些div并且我设置溢出：隐藏。主div可以显示五个子div，之后我需要滚动查看其余的div。要向下滚动，我创建了一个div和点击功能的div我正在滚动div的其余部分。代码如下：

 if(whatsupobj.length > 5){ 
    $('#scrolldown').click(function(){
        var toppx = whatsupobj.length-1;
        var lastdivtoppx = '268px';                                     
        if($('#subdiv'+toppx).css('top') !== lastdivtoppx ){
            $(".subdiv").animate({"top": "-=67px"}, "medium");
        }
    });

    $('#scrollup').click(function(){
        if($('#subdiv0').css('top') !== '0px' ){
            $(".subdiv").animate({"top": "+=67px"}, "medium");
        }
    }); 
}else{  
    $('#scrollup').unbind("click");
    $('#scrolldown').unbind("click");
}

它的工作正常，只有一个问题。问题是，当我非常快地点击滚动时，子div继续下降。但是当我正常点击滚动时，它会在最后一个div显示时自动停止。我知道我可以增加或减少动画速度，但是当它快速时它看起来不太好。我该如何解决这个问题？提前谢谢。

Answer 1

据我所知，你可能会遇到这个.animate({"top": "+=67px"}代码。

您应该添加一个.stop（），以便在您再次点击时停止，并且不会继续，例如：$(".subdiv").stop().animate({"top": "+=67px"}, "medium");

现在您的问题是您添加和减去原始值，除非动画完成，否则您的值将全部搞砸。

最好的解决方案是在进行这些动画时不添加和减去，最好从元素本身获取css值，或者至少明确设置css值，如下所示：animate({"top": "67px"}，但是你必须构建一种为每次后续点击找到正确值的方法。

第二个选项是将stop（）设置为自动转到动画的结尾，如果重复点击处理程序，这将使您的动画略微跳过，但这是解决问题的最简单方法，并且会看起来像这样：

$(".subdiv").stop(true, true).animate({"top": "+=67px"}, "medium");

为什么当我更快地点击div时，jQuery的animate（）函数不起作用？

1 个答案: