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 に答える