將元素滑入容器

我試圖將一些生成的元素定期滑入容器中。我試圖使用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的內部還是外部？
哪些屬性應該在動畫方法中有？

來源

2013-04-10 amp

可能的重複項：http://stackoverflow.com/q/15063125/86072。這個其他問題是否回答你的問題？ – LeGEC 2013-04-10 10:37:47

你會在JSFIDDLE找到一些答案。有一個簡單的例子，你想要做什麼。

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

點擊紅色邊框格。在CSS中，聲明一個帶位置的div非常重要：相對於將div移動到要移動的div。位置：絕對和溢出：移動div的隱藏是mantadory。移動後，您可以隱藏或移除div。我不確切知道時間軸容器需要什麼嗎？

來源

2013-04-10 12:05:28

將元素滑入容器

回答

相關問題