Скользящие элементы в контейнер

Question

Я периодически помещаю некоторые сгенерированные элементы в контейнер. Я пытаюсь использовать .animate() jQuery.

То, что я до сих пор:

<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") должны прийти с правой стороны контейнера, и выйти на левой стороне ... После того, как она должна быть удалена ...

у меня есть некоторые сомнения:

• Какие свойства CSS я должен иметь в mainContainer и в photoContainer (положение, слева, и т.д ...)?
• Должен ли я разместить 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> 

Щелкните по красной рамке с разделителем. В CSS важно объявить div с позицией: относительно обертывания вокруг div, который вы хотите переместить. Положение: абсолютное и переполнение: скрытое от движущегося div - мантадори. Вы можете скрыть или удалить div после перемещения. Я не знаю точно, для чего предназначен контейнер временной шкалы?