0

私はこれとこれを見ましたが、それは役に立ちませんでした。
ニュースティッカーがあります。高さが固定されたリストには、リストの最後に追加されるアイテムがあります。

編集済み：一度に表示されるアイテムは1つだけで、最初のアイテムが上にスライドしてフェードアウトすると、次のアイテムが上にスライドしてフェードインします。 

<ul id="ticker">
    <li>
        Sample note 1
    </li>
    <li>
        Sample note 2
    </li>
    <li>
        Sample note 3
    </li>
</ul>

これはjavascriptコードです： 

function tick(){
    $('#ticker li:first').slideUP( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 2000);

これを設定して、上にスライドするだけでなく、フェードアウトし、下部でスライド効果でフェードインするようにします。
アニメーション効果を使用する必要があることはわかっています。何度も試しましたが、どれもうまくいきませんでした。これについて私を助けてください。
ありがとう！

4

2 に答える 2

5

簡単なアプローチは次のとおりです。

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        $(el).find('li').first().slideUp(duration, function() {
            $(this)
                .insertAfter($(this).nextAll('li').last())
                .fadeIn(duration, function(){
                    ticker(el, duration);
                });
        });
    }
}

これを jQuery オブジェクトで呼び出すことができます。

ticker($('#ticker'));​​​​​

JS フィドルのデモ。

または、指定された期間 (ミリ秒単位) でプレーンな DOM ノードを使用します。

ticker(document.getElementById('ticker'), 300);​​​​​​​​​

JS フィドルのデモ。

OPが残したコメントに応えて（以下のコメントで）：

この解決策は、最初の項目を上にスライドさせ、最後の項目でフェード インします。しかし、最初と次のアイテムの両方でフェード+スライドが必要です。リストは一度に 1 つの項目だけが表示されるようにスタイル設定されています。

animate()リスト要素の高さ/不透明度をアニメーション化するために使用して、これを提供します。

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        var first = el.find('li').first(),
            last = first.nextAll().last(),
            h = last.height();
        first.animate({
            height: 0,
            opacity: 0
        }, duration, function() {
            $(this).insertAfter(last).animate({
                height: h,
                opacity: 1
            }, duration, function() {
                ticker(el, duration);
            });
        });
    }
}

JS フィドルのデモ。

OPからの明確化に従って、次のように編集されました。

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        var lis = el.find('li').css('display', 'none');

        lis.first().fadeIn(duration, function(){
            $(this).slideUp(duration, function(){
                $(this).insertAfter(lis.last());
                ticker(el, duration);
            });
        });
    }
}

JS フィドルのデモ。

参考文献:

于 2013-01-01T07:25:31.427 に答える
1

http://jsfiddle.net/zLe2B/19/で私のソリューションを試してください。

html:

<ul id="ticker">
    <li>
        <span>Sample note 1</span>
    </li>
    <li>
        <span>Sample note 2</span>
    </li>
    <li>
        <span>Sample note 3</span>
    </li>
</ul>

JavaScript:

    $(document).ready(function(){
    function tick(timeout){
        var first = $('#ticker li:first');
        var next = first.next();

        first.children('span').fadeOut(timeout);
        first.slideUp(timeout, function () {      
             first.appendTo($('#ticker'));                
        });

        next.slideDown(timeout);
        next.children('span').hide().fadeIn(timeout);
    }
    setInterval(function(){tick(1000)}, 2000);
});​

css:

ul, li, span {
    display: block
}

#ticker li {
    height: 20px;
}

#ticker {
    height: 20px;
    overflow: hidden;
}
于 2013-01-01T07:39:42.700 に答える