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 당신의 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>