jquery - 如何在 Jquery 中重置动画

Question

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

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

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