jQuery animate on previously appended div

Question

I'm trying to animate a div that I previously appended, but the animation doesn't happen, even though the complete function is executed.

Here is a very simple example:

EDIT: I corrected the typo in my jsFiddle and the problem is still there, but thank you for pointing it out.

HTML:

<button id="test">
    Go
</button>
<div class="elements">
</div>

JS:

$('#test').click(function(){
  $("<div class='element-test'><img src='https://image.flaticon.com/icons/png/128/148/148836.png' style='position:absolute; z-index:40; top:400px; left:200px; width:2%;'></div>")
  .appendTo('.elements').animate({top:'100px', left:'400px'}, 500, function(){
      $('.element-test').fadeOut(200);
    });
});

I wrote a jsFiddle showing the problem.

In my application, I would need to animate this with % positions, and I thought that was the problem in the beginning. However, changing it to pixel positions or even pure int numbers in the animate parameters doesn't solve it.

At the beginning, I was using .append() and then animate(). The idea of using appendTo().animate() comes from there.

There is a typo in your posted code... Just [fix it](https://jsfiddle.net/oqh7u1jv/1/) As a side note, each time you click you append a new element — A. Wolff, Nov 15 '17 at 09:39
Thank you, but the animation still won't happen, ie the image is still not moving and that's what I would like to happen. — Reyedy, Nov 15 '17 at 09:43
You animate the container of image, not image itself. You could use: `.appendTo('.elements').children('img')` but you still have dupe issue on each click — A. Wolff, Nov 15 '17 at 09:49
Could be something you are looking for, e.g: [https://jsfiddle.net/oqh7u1jv/5/](https://jsfiddle.net/oqh7u1jv/5/) — A. Wolff, Nov 15 '17 at 09:53

score 1 · Answer 1 · 2017-11-15T11:54:06.300

1

You must first wait for the image, until it will be fully loaded, with onload event. Then, in callback of onload event, you can run the animation:

var $container = $('.elements')
var imageSrc = 'https://image.flaticon.com/icons/png/128/148/148836.png'
var element = `
  <div class="element-test">
    <img src="${imageSrc}">
  </div
`

function appendElement (elm) {
  $(elm).appendTo($container)
  $('.element-test img').on('load', animateElement)
}

function animateElement () {
  $(this)
    .animate({
      top: '+=100',
      left: '+=400'
    }, 1000)
    .promise()
    .then($(this).fadeOut())
}

$('#test').click(appendElement.bind(this, element))

.element-test img {
  position:absolute;
}

<button id="test">Go</button>
<div class="elements"></div>

<script src="https://unpkg.com/jquery"></script>

edited Nov 15 '17 at 11:54

answered Nov 15 '17 at 10:10

jQuery append() function behaves synchronously so there is no need to wait for anything. Your solution actually works because you also solved my problem by animating the image and not the div. That was my problem, as simple as that. – Reyedy Nov 15 '17 at 14:18
@Driblou But without waiting for an onload event, you start the animation before it appears. – Nov 15 '17 at 14:24
In my actual code (not here), I called the animate() function on next line, after append(), and it works perfectly without needing your solution. I think you are right if I call append().animate(), which I did on my original post. :) – Reyedy Nov 15 '17 at 14:48

Zvezdas1989 · Answer 2 · 2017-11-15T10:25:31.353

0

You made a mistake in typing:

You used top:100px' instead of top:'100px'

Here is correct code:

$('#test').click(function(){
  $("<div class='element-test'><img src='https://image.flaticon.com/icons/png/128/148/148836.png' style='position:absolute; z-index:40; top:400px; left:200px; width:2%;'></div>").appendTo('.elements').animate({top:'100px', left:'400px'}, 500, function(){
    $('.element-test').fadeOut(200);
  });
});

Here is JSBin showing you how to append and animate, adjust your code to it: http://jsbin.com/wotafijiru/edit?html,js,output

edited Nov 15 '17 at 10:25

answered Nov 15 '17 at 09:40

Zvezdas1989

1,345
11
29

Thank you, but the animation still won't happen, ie the image is still not moving and that's what I would like to happen. – Reyedy Nov 15 '17 at 09:41
Check JSBin I've added – Zvezdas1989 Nov 15 '17 at 10:25

score 0 · Answer 3 · edited Nov 15 '17 at 13:55

$('#test').click(function(){
  var img = $("<div class='element-test'><img src='https://image.flaticon.com/icons/png/128/148/148836.png' style='height:130px;width:130px;position:absolute;'></div>");
  $("body").append(img);
  $('img').animate({
    left: '250px',
    opacity: '0.5',
    top: '+=100px',
    left: '+=400px'
  });
  $('img').fadeOut(200)  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="test">
  Go
</button>

<div class="elements"></div>

jQuery animate on previously appended div

3 Answers3