0

我正在尝试将一些生成的元素定期滑入容器中。我正在尝试使用 .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")右侧进来，从左侧出来......之后它应该被移除......

我有些疑惑：

  • 我应该在（位置、左等...）中具有哪些 CSSmainContainer属性photoContainer？
  • 我应该放在photoContainer里面还是外面mainContainer？
  • 我应该在 animate 方法中具有哪些属性？
4

1 回答 1

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:relative 的 div 来包裹你想要移动的 div 是很重要的。移动 div 的 position:absolute 和 overflow:hidden 是强制性的。您可以在移动后隐藏或删除 div。我不确切知道时间线容器的用途是什么？

于 2013-04-10T12:05:28.310 回答