jQuery에서 .animate() 함수 사이에 이미지를로드하는 방법?

Question

다음과 같이 .animate 및 setInterval 함수를 사용하여 jquery를 빌드하려고합니다.

$(document).ready(function(){ 
$("#animate1").animate({'margin-left':'150px','margin-bottom':'50px'},2000) 
    },300); 
    }); 

이 애니메이션은 내 이미지를 아래에서 왼쪽으로 움직입니다. 이 애니메이션 이후에만이 애니메이션이 표시되는 동안 이미지를 표시하려는 경우 어떻게 그걸 넣을 수 있습니까? ?? 페이드 아웃, 애니메이션, 페이드 인 : 당신은 단순히 이러한 작업을 체인 수없는 이유

<div> <div id="animate1"><img src="img/chotu.png" style="height:200px; width:200px;"/> </div></div>

Answer 1

에 따라 나의 HTML은? 여기

은 예입니다 https://jsfiddle.net/45ky6pgw/3/

HTML :

<div id="outer"> 
    <div id="animate1"> 
    <img src="http://cliparts.co/cliparts/riL/xdz/riLxdzRoT.jpg"/> 
    </div> 
</div> 

CSS :

#outer { 
    position: relative; 
    border: 2px solid green; 
    width: 300px; 
    height: 300px; 
} 
#animate1 { 
    position: absolute; 
    display: none; 
    bottom: 0; 
    left: 100px; 
    vertical-align: bottom; 
} 
#animate1 img { 
    width: 100px; 
    height: 100px; 
} 

JS :

$(document).ready(function() { 
    setTimeout(function(){ 
    $("#animate1") 
     .fadeIn('slow') 
     .animate({'margin-left':'50px','margin-bottom':'50px'},2000) 
     .fadeOut('slow'); 
    }, 2000) 
}); 

당신은의 "체인"볼 수 있습니다 3 개 ods fadeIn(), animate() 및 fadeOut()이 JS 코드에 있습니다.

Answer 2

나는 이것을 찾고있는 exaclty ... !!

$(document).ready(function(){ 
    setInterval(function(){ 
    $("#animate1").fadeIn('slow').animate({'margin-left':'150px','margin-bottom':'50px'},2000).fadeOut(); 
    $("#animate1").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-150px'},2000).fadeOut(); 
    },300); 
    }); 

및 fisrt.fadeOut() 함수 후 내 배경 이미지 불투명도를 변경하고 싶습니다 .. !!

Answer 3

백그라운드 div 클래스 또는 div id가 동일해야하거나 jquery chaining으로 할 수 있기 때문에 불가능합니다. 그러나 jquery chaining은 하나씩 애니메이션을 재생합니다. 그래서 CSS 변환이나 애니메이션으로도 할 수 있습니다.