3

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

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

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

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

这是我的jsFiddle链接：

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

4

2 回答 2

3

您的代码正在等待下一个动画周期来更新左边距，这会在几帧之后发生。您需要立即设置它（在与 相同的帧上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在选择器中使用更快，但这并不重要:)
于 2015-07-15T08:30:37.863 回答
2

我重新实现了动画的工作原理。现在它一次动画一个宽度的股票项目。

我相信这是一种更好的方法，因为通过使用--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/

于 2015-07-15T08:35:00.090 回答