jQuery 新闻代码：.remove() dom 效果

Question

我正在尝试制作新闻自动收报机（没有任何 plug-in）。我使用 jQuery UI 的动画方法使新闻从右向左移动。

我正在删除第一个新闻 (li) 并将其附加到列表的末尾 (ul) 并重新调整 margin-left。这不是为了每个循环后得到一个长白space。

问题是...当我 .remove() 第一个消息时，它导致了一个不受欢迎的 UI 故障（至少对我而言）。这部分：

leftMargin = leftMargin + $('.news-ticker-display li:first').width() - 2;
$('.news-ticker-display li:first').remove();

这是我的 jsFiddle link:

任何 help/suggestion/comment/alternative 将不胜感激。抱歉，我想不出一个有建设性的标题。哈哈

Answer 1

您的代码正在等待下一个动画周期更新左边距，这会在几帧后发生。您需要立即设置它（与 remove() 在同一帧上）以避免视觉故障。

var leftMargin, scrollSpeed;
var playScroll = true;

scrollSpeed = 5;
leftMargin = 0;

function autoPlay() {
    if (playScroll) {
        $('.news-ticker-display').animate({ marginLeft: --leftMargin }, scrollSpeed, "linear", function () {
            var $first = $('.news-ticker-display li:first');
            var width = $first.outerWidth();
            if (leftMargin < -width) {
                $first.clone().appendTo('.news-ticker-display ul');
                leftMargin = leftMargin + width;
                $first.remove();
                $(this).css({marginLeft: --leftMargin});
            }
            autoPlay();
        });
    }
}

autoPlay();

JSFiddle: https://jsfiddle.net/TrueBlueAussie/8djw6qen/8/

备注：

您会看到我使用临时变量简化了代码。最好不要重复 jQuery 选择器。
您还需要使用outerWidth()，而不是尝试补偿边框。
我加快了测试动画的速度（否则花了太长时间才能看到故障）:)只需将其设置回您自己的值即可。
您可以使用上下文减少第一个选择器。例如var $first = $('li:first', this);
.first() 通常比在选择器中使用 :first 更快，但这在这里真的无关紧要:)

Answer 2

我已经重新实现了动画的工作原理。现在它一次为 ticker 项目的一个宽度设置动画。

我相信这是一种更好的方法，因为通过使用 --leftMargin，您的动画回调是运行 每个像素 ，而使用这种方法，滚动一项后仅运行。也不需要检查项目是否已经开始。

通过将动画持续时间设置为 width*scrollSpeed，每个像素都以相同的速率滚动。

注意 outerWidth 被使用，因为它将包括项目的任何边框和填充。

function autoPlay() {
    if(!playScroll) return;

    var width = $('.news-ticker-display li:first').outerWidth();
    var animateTime = width*scrollSpeed;

    $('.news-ticker-display').animate({ marginLeft: -width }, animateTime, "linear", function(){
        $('.news-ticker-display li:first').clone().appendTo('.news-ticker-display ul');
        $('.news-ticker-display li:first').remove();
        $('.news-ticker-display').css("marginLeft", 0);
        autoPlay();
    });
}

演示：https://jsfiddle.net/alan0xd7/8djw6qen/6/

jQuery 新闻代码：.remove() dom 效果

jQuery News Ticker: .remove() dom effect

jquery

news-ticker

备注：