0

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

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

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

我猜它相当简单，但我不确定如何。我可以从 CSS 开始，只定义要显示的第一个 p。然后在jQuery slideright current，然后next() slideleft？

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

4

1 回答 1

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

于 2013-02-08T19:14:18.433 回答