javascript - jQuery animate 在先前附加的 div 上

Question

我正在尝试为我之前附加的 div 制作动画，但动画并没有发生，即使执行了 complete 函数也是如此。

这是一个非常简单的例子:

编辑:我更正了 jsFiddle 中的拼写错误，问题仍然存在，但感谢您指出。

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);
    });
});

我写了一个jsFiddle显示问题。

在我的应用程序中，我需要用 % positions 对此进行动画处理，一开始我认为这是问题所在。但是，在 animate 参数中将其更改为像素位置甚至纯 int 数字并不能解决问题。

一开始，我使用的是.append()，然后是animate()。使用 appendTo().animate() 的想法来自 there .

Answer 1

您必须首先等待图像，直到它完全加载，使用 onload 事件。然后，在onload事件的回调中，就可以运行动画了:

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>