动画列表中删除元素的项目？

我已经实现了一个滚动列表，它通过删除顶部元素并将其追加到底部来工作。这给了它无限滚动的效果。问题是，通过删除< 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/

来源

2014-10-07 Captain Stack

这个怎么样？

setInterval(function() { 
    var top = $('li').first(); 
    top.hide(200, function() { 
     top.remove(); 
     $('ul').append(top); 
     top.show(200); 
    }); 
}, 2000);

来源

2014-10-07 22:17:45

这令人惊讶的效果很好。我其实知道这个，但假设它会等到动画完成，然后跳转其他元素。他们很好地滑入了地方。谢谢！ – 2014-10-07 22:32:56

您可以使用回调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>

来源

2014-10-07 22:19:35 dave

我将动画顶部位置（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; 
}

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:38:28 skobaljic

动画列表中删除元素的项目？

回答

相关问题