CODEWITHSUNDEEP
jquery
buydadip
buydadip

Reputation: 9417

How to animate an object more than once

I have the following click function using 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");
});

When the button is clicked, animate() is called for two separate objects, but my issue is that once the object has been already animated, if I click the button again, the object does not reappear animated.

How can I make it so that every time I click the button, animate() will run.

Upvotes: 0

Views: 34

Answers (1)

digglemister
digglemister

Reputation: 1487

Try reseting the height of #boxMid and the top of #boxTop in your function before the animations. This way, every time you click #buttonPic, these values will be reset and animated.

Without seeing more of your code, I can't give an exact example, but is this the kind of thing you want? https://jsfiddle.net/oez0488h/52/

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

Upvotes: 1

Related Questions