Question

所以我有以下代码：

$("#btn1").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $("#div").offset().top
    }, 2000);
    $("#div").addClass("flash");
    setTimeout( function(){
        $("#div").removeClass("flash"), 1000;
    }, 1000);
});

当我点击按钮时，它会向下滚动到div并闪烁其颜色（flash类）。但是如果div位于页面底部怎么办？我需要更改上面的ode，以便scrollTop首先执行并完成，然后执行下一段代码（addClass和{{1}功能）。我想我需要加一个延迟？或者检查功能是否完整的东西，如果是，启动下一个？

Answer 1

我认为您正在寻找的是动画回调。它是.animate()方法的第四个参数：http://api.jquery.com/animate/

所以在你的情况下，它看起来像这样：

$("#btn1").click(function(event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $("#div").offset().top
    }, 
    2000, 
    'swing', 
    function () {
        $("#div").addClass("flash");
        setTimeout( function(){
            $("#div").removeClass("flash"), 1000;
        }, 1000);
    });

});

顺便说一下。 缓存jQuery选择器进行优化是一种很好的做法（jQuery不会在DOM中搜索查询的节点，并且每次都运行其构造函数）。

为了便于阅读和分离闪存功能，我还重构了这段代码，因此你可以在这样的回调中方便地使用它（在这种情况下，函数会将动画元素作为this对象获取，或者只是直接运行它，传递任何jQuery元素（例如flash($('.anything'))）

$("#btn1").click(function(event) {
    event.preventDefault();

    $div = $('#div');
    $('html, body').animate({
        scrollTop: $div.offset().top
    }, 2000, 'swing', flashElement});
});

function flashElement(element) {
    element = element || this;
    element.addClass("flash");
    setTimeout( function(){
        element.removeClass("flash"), 1000;
    }, 1000);
}

Answer 2

你只需要一个回调......

$("#btn1").click(function(event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $("#div").offset().top
    }, 2000, function(){
     $("#div").addClass("flash");
        setTimeout( function(){
            $("#div").removeClass("flash"), 1000;
        }, 1000);  
    });
});

jQuery flash一个元素onclick和滚动后

2 个答案: