I have this div that gets animated until a button click calls the jpLand() function.
function jpTakeOff(){
$('#flyer').animate({
top: '125px',
left: '150px'
}, 1800, 'easeOutCubic', jpHover);
};
function jpHover(){
$('#flyer').animate({
top: '135px',
left: '145px'
}, 1000, function(){
$(this).animate({
top: '125px',
left: '150px'
}, 1000, jpHover);
});
};
function jpLand(){
$('#flyer').animate({
top: '50px',
left: '700px'
}, 1800, 'easeOutCubic', function(){
$(this).dequeue();
$(this).animate({
top: '500px',
left: '750px'
}, 2000, 'easeOutCubic', function(){
$(this).stop(true, false);
$(this).dequeue();
});
});
};
When jpLand() finishes it should stop the animation withe the div in its final position. The animation does go to the final position and then jumps back to the middle (jpHover()) for 1 'cycle' and then jumps to its final position. I have tried various methods to stop the jump - I just haven't been able to find a way. I appreciate any guidance that anyone can give me!