单击相同的“div”时如何将“div”从下到上和从上到下移动

Question

我有这个 jquery 代码

$("#Wrapper").click(function() {
    var th = $(this);
    if ($(th).css('top') == '-400px') {
        console.log("ret");
        $(th).animate({
            "top": "50px"
        }, 1000);
    } else {
        console.log("sdffsdsff");
        $(th).animate({
            "top": "-400px"
        }, 1000);
    }
});

此代码最初可以运行，但后来会减慢速度。

当我点击“包装器”时，它应该移到顶部。 当我再次单击相同的“包装器”时，它应该移到底部

或者还有另一种使用“包装器”上下滚动页面的方法？

怎么做？更多改进动画的建议非常感谢。在此先感谢。

Answer 1

您必须在单击时停止动画并将Wrapper 的单击处理程序设置在Article_1 的单击处理程序之外：

$(document).ready(function(){
    $('#Article_1').click(function () {
        $("#Article_1").toggleClass('magictime perspectiveDown');
        $("#Article_3").toggleClass('magictime perspectiveUp'); 
    });

    $("#Wrapper").click(function () {
        var th = $(this);
        if (!th.hasClass('down')) {
            console.log("ret");
            th.addClass('down').stop(true).animate({
                "top": "50px"
            }, 1000, function() {
                $('body').scrollTop(th.height());
            });
        } else {
            console.log("sdffsdsff");
            th.removeClass('down').stop(true).animate({
                "top": "-400px"
            }, 1000, function() {
                $('body').scrollTop(th.scrollTop());
            });
        }
    });
});