CODEWITHSUNDEEP
javascriptjqueryanimation
Reyedy
Reyedy

Reputation: 918

jQuery animate on previously appended div

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.

Upvotes: 1

Views: 100

Answers (3)

vicky patel
vicky patel

Reputation: 705

$('#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>

Upvotes: 0

user6748331
user6748331

Reputation:

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>

Upvotes: 1

Zvezdas1989
Zvezdas1989

Reputation: 1465

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

Upvotes: 0

Related Questions