动画列表中删除元素的项目?
问题描述:
我已经实现了一个滚动列表,它通过删除顶部元素并将其追加到底部来工作。这给了它无限滚动的效果。问题是,通过删除< li>,所有元素都以一种不稳定的方式向上移动(要清楚,我确实希望它们向上移动,但我希望它平滑)。动画列表中删除元素的项目?
有没有什么方法可以在DOM中对这种变化进行动画处理,以便它看起来物品可以滑入新的位置,而不是让它变成位置?下面是一些代码来显示它是如何目前实施:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
// Called every few seconds
function scrollList() {
var top = $('li').first();
$('li').first().remove();
$('ul').append(top);
}
下面是JS小提琴的链接,显示当前的行为: http://jsfiddle.net/gak7u1r8/
答
这个怎么样?
setInterval(function() {
var top = $('li').first();
top.hide(200, function() {
top.remove();
$('ul').append(top);
top.show(200);
});
}, 2000);
答
您可以使用回调slideUp()后做一些事情:
setInterval(scrollList, 1000);
function scrollList() {
var top = $('li').first();
$('li').first().slideUp(400, function() {
$('ul').append(top);
top.show();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
答
我将动画顶部位置(linear
或swing
)如下: http://jsfiddle.net/gak7u1r8/3/
CSS
div {
position: relative;
height: 75px;
overflow: hidden;
margin: 1em;
background: none #efefef;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
position: absolute;
left: 0;
top: 0;
}
li {
line-height: 25px;
height: 25px;
overflow: hidden;
}
JS
function scrollList() {
setTimeout(function() {
$('ul').animate({top: -25}, 500, 'swing', function() {
$('ul').css({'top': '0'}).append($('li').first());
scrollList();
});
}, 2000);
};
scrollList();
这令人惊讶的效果很好。我其实知道这个,但假设它会等到动画完成,然后跳转其他元素。他们很好地滑入了地方。谢谢! – 2014-10-07 22:32:56