我试图定期将一些生成的元素滑入容器中。我正在尝试使用 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
的内部还是外部? - 我应该在 animate 方法中拥有哪些属性?
最佳答案
您会在 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。 我不确切知道时间轴容器是用来干什么的?
关于jquery - 将元素滑入容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15923330/