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());
            });
        }
    });
});

点击相同的“div”时如何将“div”从底部移动到顶部和从上到下移动

1 个答案: