jQuery News Ticker : . remove() dom 效果

Question

我正在尝试制作新闻自动收报机(没有任何插件)。我使用 jQuery UI 的动画方法使新闻从右向左移动。

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

问题是...当我 .remove() 第一个消息时，它会导致不良的 UI 故障(至少对我而言)。这部分:

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

这是我的 jsFiddle链接:

任何帮助/建议/评论/替代方案将不胜感激。抱歉，我想不出一个有建设性的标题。哈哈

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 更快，但这在这里并不重要:)