Question

是否可以延迟默认操作？

我有这个链接，点击它之后我会显示一个带内容的隐藏div。然后我想用我的屏幕下滑到那个div，所以新的div是我的屏幕的顶部，但我的问题是，在我点击按钮之后，div需要一些时间来制作动画，因此我需要一些延迟使得在div变得可见之后，scrollto将会触发。

我做了fiddle

HTML

<div class="wrapper">
    <div class="first-div">
        <a href="#">Link1</a>
        <a id="activate-two" href="#second">Link2</a>
        <a href="#">Link3</a>
    </div>
    <div class="second-div" id="second">
        <a id="activate-three" href="#third">Link1</a>
        <a href="#">Link2</a>
        <a href="#">Link3</a>
    </div>
    <div class="third-div" id="third">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a id="activate-four" href="#">Link3</a>
    </div>
</div>

CSS

.wrapper {background-color:#F60;}
.first-div {background-color:#CCC;}
.first-div, .second-div, .third-div {height:1200px;}
.second-div, .third-div {display:none;}

JQUERY

$(document).ready(
    function(){
        $("#activate-two").click(function(){
            $("#second").animate({
            height:'show'
            });
        });
        });

Answer 1

您不需要延迟，您需要使用.animate回调函数：

$("#activate-two").click(function(){
    $("#second").animate({
        height:'show'
    }, function() {
        //Fire your scroll function here!
    });

Answer 2

请勿使用延迟，请使用回调。

jQuery动画有complete function，动画结束时会触发。然后，您可以在最终位置滚动到您的对象。

Answer 3

也许这会对你有所帮助：

$("#activate-two").click(function(){
   $("#second").show("100",function(){
      $('html, body').animate({ scrollTop: $("#second").offset().top }, 'slow');
   })
});

这是更新的Fiddle

延迟默认操作标记

3 个答案: