如何在 Jquery 中重置动画答案

【问题标题】：How to reset animation in Jquery如何在 Jquery 中重置动画
【发布时间】：2017-11-09 21:41:00
【问题描述】：

所以这是我的问题。我有一个执行一些动画的图像，但在动画完成后不会回到它的原始位置。基本上，我希望图像移动、淡出，然后返回到原来的位置。我尝试了几种不同的选择，例如：

$("#album1").stop(true).css({top: 0, left: 0});

$('#album1').removeAttr('style');

$('#album1').finish().css('top', '0').css('left', '0');

这些似乎都不起作用，所以我想我可能会看看是否有人有一些建议。你可以在下面找到我的代码。

jQuery

 $(".playbutton1").click(function () {
    $("#album1").animate({
        "left": "750px", "top": "100px"
    }, 500);
    $("#album1").css({
        'transform': 'rotateY(180deg)'
    });
    $("#album1").delay(500).fadeOut();
    $('#album1').finish().css('top', '0').css('left', '0');     
});

HTML

<div class="toggle1" id="album1">
    <img id="foo" src="jukeimage/record.png">
    <div class="center-block">
       <p class="p1 albumtext">Foo Fighters</p>
       <button class="center-block button">
       <img class="playbutton1" src="jukeimage/play.png" 
       onclick="song('audio/pretender.m4a');">
       </button>
    </div>
</div>

【问题讨论】：

你在 HTML 元素之后加载 jQuery 吗？
不，它比其他任何东西都先加载。
api.jquery.com/animate 有一个完整的回调，您可以在动画完成时给它执行淡出。然后api.jquery.com/fadeOut 也有一个完整的回调，你可以给它重置你需要重置的任何东西。

标签： jquery css animation position reset

【解决方案1】：

function loop() {
  var $div = $('#testing');
  
  //show the element if it was hidden from last loop
  $div.show().animate(
    { top: '100px', left: '100px' } //move it
    , function() {
      $div.fadeOut('slow', function(){ //hide it after it's moved
        $div.css({ top: '0px', left: '0px' }); //reset the animation
        setTimeout(loop, 2000); //repeat after a delay
      });
    }
  );
}

loop();

#testing {
  position: relative;
  display: inline-block;
  min-width: 50px;
  min-height: 50px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testing">Testing</div>

【讨论】：