0

I would like to have a button on my page that scrolls to top of the page and then slides down a div.

this is what I have:

$(document).ready(function(){

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

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

});

the problem is that when the animate scrolltop ends the div have already slided, how can I chain the actions?

thanks

4

4 回答 4

2

The animate function takes a function argument, that can be called once the animation is complete.

.animate( properties [, duration] [, easing] [, complete] )

  • properties - A map of CSS properties that the animation will move toward.
  • duration - A string or number determining how long the animation will run.
  • easing - A string indicating which easing function to use for the transition.
  • complete - A function to call once the animation is complete.

You can change your code to:

$(document).ready(function(){

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

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

});
于 2012-05-16T15:34:51.170 回答
2

使用动画函数的完整回调功能。这仅在动画完成时触发。

jQuery：

$(document).ready(function() {

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

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

这是一个jsFiddle 示例。

功能齐全

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

于 2012-05-16T15:36:41.173 回答
1

像这样在动画的完整回调中插入您的 SlideToggle

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

    });

检查$.animate文档。

于 2012-05-16T15:35:37.157 回答
0

Using the queue functionality in jquery: http://api.jquery.com/queue/

于 2012-05-16T15:34:22.390 回答