How to animate a div only once?

How to animate a div only once?

i have two div(action,action2) which will animate if the scroll amount is
above 100.what i want is action2 to be animating from 40% of right and
bottom then animate to 30% of right and bottom then again 40% of right and
bottom. i tried with the below code
$(document).ready(function () {
$(document).scroll(function () {
var t = $(document).scrollTop();
if (t > 100) {
$('#action').stop().animate({
right: "50%",
bottom: "50%"
}, 1000, "easeOutBounce");
$('#action2').stop().animate({
right: "40%",
bottom: "40%"
}, 1000, "easeOutBounce");
$('#action2').stop().delay(800).animate({
right: "30%",
bottom: "30%"
}, 1000, "easeOutBounce");
$('#action2').stop().animate({
right: "40%",
bottom: "40%"
}, 1000, "easeOutBounce");
} else {
$('#action').stop().animate({
right: "0",
bottom: "0"
}, 1000, "easeOutBounce");
$('#action2').stop().animate({
right: "0",
bottom: "0"
}, 1000, "easeOutBounce");
}
});
});
this doing the animation multiple time.i want it to animate once as in
code like from 40% to 30% then 40% that's it. What wrong in this code