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>