요소를 컨테이너로 밀어 넣기

Question

생성 된 요소를 주기적으로 컨테이너로 밀어 넣으려고합니다. jQuery의 .animate()를 사용하려고합니다.

나는 지금까지 무엇을 가지고 :

이

<div id="mainContainer"> 
    </div> 

<div id="photoContainer" class="photocontclass" style="display:none"> 
     <img id="image" src="@Url.Action("Photo_Read", new { Id = 1})" /> 
    </div> 

<script> 
    var photoId = 2; 

    $(document).ready(function() { 
     setInterval(function() { getPhoto() }, 3000); 
    }); 

    function getPhoto() { 
     $("#photoContainer #image").attr("src", '@Url.Action("Photo_Read")' + '/' + photoId); 
     var $new = $('#photoContainer').clone().attr("id", "photoContainer" + photoId); 
     $('#timelineContainer').prepend($new); 
     $new.show('slow'); 
     // do animation with animate... 
     $new.animate({ 
      left:'-50%' // which properties should I have? 
     }, 2000, "swing", function() { 
      $(this).remove(); 
     }); 
     photoId++; 
    } </script> 

<style> 

.photocontclass { 
    display:inline; 
    margin:10px; 
    background-color:white; 
    padding:5px; 
    position:absolute; 
} 

#timelineContainer { 
    background-color:grey; 
    height:200px; 
    width:100%; 
    margin:10px; 
    padding:10px; 
} 

</style> 

$("#photoContainer") 컨테이너의 오른쪽에서오고, 왼쪽에 나올한다 ...이 제거되어야 후 ...

좀 의심이 :

나는 mainContainer에와 photoContainer에 있어야한다 CSS 속성

• (왼쪽 위치, 등)?
• photoContainer을 mainContainer의 내부 또는 외부에 배치해야합니까?
• 어떤 속성이 애니메이션 메서드에 있어야합니까?

Answer 1

JSFIDDLE에서 몇 가지 답변을 찾을 수 있습니다. 당신이하고 싶은 것에 대한 간단한 예가 있습니다.

<div id="mainContainer"> 
<div id="photoContainer" class="photocontclass"> 
    <img id="image" src="@Url.Action("Photo_Read", new { Id = 1})" /> 
</div> 
</div> 

빨간색 테두리가있는 div를 클릭하십시오. CSS에서는 position을 사용하여 div를 선언하는 것이 중요합니다. 이동하려는 div를 arround로 감싸는 것입니다. 위치 : 절대 및 오버플로 : 이동 div의 숨겨진 mantadory입니다. 이동 후 div를 숨기거나 제거 할 수 있습니다. 타임 라인 컨테이너가 무엇인지 정확히 알지 못합니까?