CODEWITHSUNDEEP
jquery
Andy
Andy

Reputation: 1432

Resetting following an animation

I have the following animation configured to fade and slide a block into view on "mouseover", only to fadeout and slide it away again on "mouseout". However, if I move the mouse back over the container DIV again the same animation proceeds but starting from the wrong position. How do I get it to reset back to the starting position? If possible, I'd like to avoid having to add another animation to move it back to the original position.

$(".box").css("opacity",0);
    $(".container").mouseover(function () {
        $(".box").stop(true, true).animate({top:99, opacity: 1},150);
    });
    $(".container").mouseout(function () {
        $(".box").stop(true, true).animate({top:59, opacity: 0},150);
    });

Upvotes: 0

Views: 92

Answers (1)

jfriend00
jfriend00

Reputation: 707158

Just reset it to whatever the top value originally was while it's hidden before you start your first animation. I put the value ("top", 50) in the example, but you can fill in the actual starting value you want:

$(".box").css("opacity",0);
$(".container").mouseover(function () {
    $(".box").stop(true, true).css("top", 50).animate({top:99, opacity: 1},150);
});
$(".container").mouseout(function () {
    $(".box").stop(true, true).animate({top:59, opacity: 0},150);
});

Upvotes: 1

Related Questions