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。

在我的应用程序中，我需要使用％位置设置动画，我认为这是开始时的问题。但是，将其更改为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>

Answer 2

键入错误：

您使用top:100px'代替top:'100px'

这是正确的代码：

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

这是JSBin向您展示如何追加和动画，调整代码： http://jsbin.com/wotafijiru/edit?html,js,output

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery在之前附加的div

3 个答案: