Question

我想在我的页面上有一个按钮，滚动到页面顶部然后向下滑动div。

这就是我所拥有的：

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 1000);
        $(".slidingDiv").slideToggle(500);
    });

});

问题是，当动画滚动顶端div已经滑落时，我该如何链接动作？

感谢

Answer 1

animate函数接受一个函数参数，可以在动画完成后调用。

.animate（properties [，duration] [，easing] [，complete]）

properties - 动画将移动的CSS属性的地图走向。
duration - 确定多长时间的字符串或数字动画将运行。
easing - 表示缓和的字符串用于过渡的功能。
complete - 动画完成后调用的函数。

您可以将代码更改为：

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 1000, 'linear', function(){
            $(".slidingDiv").slideToggle(500);
        });
    });

});

Answer 2

使用动画功能的complete callback functionality。仅在动画完成时才会触发。

jQuery的：

$(document).ready(function() {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function() {
        $("html, body").animate({
            scrollTop: 0
        }, 1000, function() {
            $(".slidingDiv").slideToggle(500);
        });
    });
});

这是 jsFiddle example 。

完整功能

如果提供，则完成回调函数   动画完成。这对于串联不同可能很有用   动画按顺序组合在一起。回调不会发送任何   参数，但这被设置为动画的DOM元素。如果   多个元素是动画的，回调每执行一次   匹配的元素，不是整个动画的一次。

Answer 3

将SlideToggle插入动画的完整回调中，如下所示

$('.show_hide').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 1000,function(){
            $(".slidingDiv").slideToggle(500);
        });

    });

检查$.animate doc。

Answer 4

在jquery中使用队列功能：http://api.jquery.com/queue/

jquery连锁行动

4 个答案: