動畫列表中刪除元素的項目？

我已經實現了一個滾動列表，它通過刪除頂部元素並將其追加到底部來工作。這給了它無限滾動的效果。問題是，通過刪除< 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

動畫列表中刪除元素的項目？

回答

相關問題