我有一个列表,希望在单击该项目时将其移至顶部。同时,所有其他项目应向下移动以腾出空间。
这就是我到目前为止所拥有的:
<ul id="list">
<li id="one">item-1</li>
<li id="two">item-2</li>
<li id="three">item-3</li>
<li id="four">item-4</li>
</ul>
//
$('li').on('click', function () {
$(this).css({ position : 'absolute', top : $(this).position().top });
var height = $(this).parent().children().first().height();
var list = $(this).parent();
$(this).animate({top: '0px'}, { duration: 500, queue: false });
list.children().each(function( index, element) {
var $liElement = $(element);
if($liElement != $(this))
{
$liElement.animate({top: height + 'px'}, { duration: 500, queue: false });
}
});
});
这是链接:http://jsfiddle.net/5qgnjvdp/
我看到该项目在顶部移动,但其他所有项目根本没有移动。这里有什么问题吗?
当动画完成时,我应该使用 prepend()
在顶部插入列表项吗?
最佳答案
虽然不是真正的“动画”,但我不久前正在沿着类似的思路做一些事情。我最终使用的是 slideUp
,然后是 slideDown
来提供动画感,而无需将实际动画连接到移动。
$('li').click(function() {
$(this).slideToggle(500, function() {
$(this).prependTo('#list').slideToggle(500); });
});
li { list-style: none; background: #ddd;padding: 5px 10px; border: 1px solid #aaa; margin: 10px; text-transform: uppercase; font-weight: bold;color:#fff; }
#list { margin:20px; padding:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul id="list" data-role="listview">
<li id="one">item-1</li>
<li id="two">item-2</li>
<li id="three">item-3</li>
<li id="four">item-4</li>
</ul>
$('li').click(function() {
$(this).slideToggle(500, function() {
$(this).prependTo('#list').slideToggle(500); });
});
fiddle update
我再次意识到,这并不是真正超越幻灯片切换的动画,但它传达了一种类似于动画的交互感。
关于javascript - 如何用动画将列表项移动到顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38856330/