Karol Jankiewicz Karol Jankiewicz - 5 months ago 13
Javascript Question

Jquery animate created element

I made div, if i click on it, jquery makes bullet and that element is animated. This is code:

$('.square').click(function() {

$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
});


It works properly when I'm not clicking second time on div before animation is done. If i do this, my second "bullet" starts animation from position of first.
How to fix that? Thank's for help :)

UPDATE##
Here's the jsfiddle with problem:
https://jsfiddle.net/2ghj1x45/

Answer

it's because the elements all have a size because they aren't positioned absolutely so each bullet div you add has display block, so will get it's own line where it's height is bullet size + margin top , which increases as it's animated. try instead using position absolute so the bullet div doesn't affect the layout of any other div

like so

$(bullet).animate({ top: value });