Question

我使用了循环插件和其他各种插件，但我不认为它们会在这个例子中起作用。我有一个最新的新闻栏目是1行。例如：

最新消息 - 这是显示的信息

我想循环浏览各种新闻。稍有不同的是我希望更新到slideRight（隐藏）然后下一个更新slideLeft（显示）。这样宽度不断变化，最新的新闻标题应该随着更新的崩溃和扩展而左右移动（可变宽度取决于文本，因为它是内联的）。因此，位置绝对和固定宽度解决方案无济于事。

我猜它相当简单，但我不确定如何。我可以从CSS开始，只定义要显示的第一个p。然后在jQuery中滑动当前，然后是next（）slideleft？

http://pastebin.com/2qCQeBMF http://pastebin.com/ERU9K8hC

Answer 1

你可以做一系列动画，然后在最后循环回来

/**
 * Method to animate the news feed
 */
function scrollNews() {
    // If latest news is not being hovered upon
    if (!$('.latestnews').hasClass('hover')) {
        // Get the currently visible update
        var currentUpdate = $('.theupdates').find('p').filter(':visible').first();
        // Get the next update
        var nextUpdate = currentUpdate.next();
        // If there are no next updates
        if (nextUpdate.length === 0) {
            // Get the first update and set it as the next update
            nextUpdate = $('.theupdates').find('p').filter(':first-of-type');
        }
        // Animate the current update out
        currentUpdate.hide('slow', function () {
            // Animate the next update in
            nextUpdate.show('slow', function () {
                // Delay a little bit and then recursively call this method
                window.setTimeout(scrollNews, 2000);
            });
        });
    } else {
        // Delay a little bit and then recursively call this method
        window.setTimeout(scrollNews, 2000);
    }
}

// Handle hover over news
$('.latestnews').on({
    'mouseover': function (e) {
        $(this).addClass('hover');
    },
    'mouseout': function (e) {
        $(this).removeClass('hover');
    }
});

// Start animation
scrollNews();

jsfiddle

jQuery - 周期略有差异

1 个答案: