Question

我使用jQuery进行以下点击功能：

$('#buttonPic').on("click", function() {
    $("#box").css("visibility", "visible");
    $("#boxMid").animate({
    height: "350px"
        }, 1500 );
    $("#boxBottom").animate({
        top: "0px"
        }, 1500 );
    $("#boxLayer").css("visibility", "visible");
    $("#boxLayer").css("z-index", "890");
    $("#langBlock").css("visibility", "visible");
    $("#language").css("color", "#d9d9d9");
});

单击该按钮时，会为两个单独的对象调用animate()，但我的问题是，一旦对象已经设置了动画，如果再次单击该按钮，则该对象不会重新显示为动画。

我怎样才能这样做，以便每次点击按钮，animate()都会运行。

Answer 1

尝试在动画之前重置#boxMid的高度和函数中#boxTop的顶部。这样，每次单击#buttonPic时，这些值都将被重置并设置动画。

如果没有看到更多的代码，我无法给出一个确切的例子，但这是你想要的那种东西吗？ https://jsfiddle.net/oez0488h/52/

$('#buttonPic').on("click", function() {
    $("#boxMid").css("height", "50px"); //reset to original height before animating
    $("#boxMid").animate({height: "350px"}, 1500);
});

如何多次为对象设置动画

1 个答案: