5

最新のニュースティッカーを作成するための最も効率的な方法を探しています。

私はul任意の数のを保持できるものを持っており、liそれらをループして1つずつフェードインし、5秒間保持してから、一度に1つずつフェードアウトする必要がありますli。リストはli40pxの高さで表示されており、表示されるウェルも40pxであり、overflow: hiddenこれを使用すると目的の効果が得られます。liまた、カーソルが表示されているときにカーソルをその上に置いた場合にその場所を保持できるようにすると、それを構築するのに最適です。

広く使用されているjQueryティッカープラグイン（古いBBCスタイル）があることは知っていますが、それを使用しようとしましたが、必要な単純さのために非常にかさばるようで、使用するスタイルに大混乱をもたらします。

私はこれまでこれを使用してきました：

function tickOut(){
        $('#ticker li:first').animate({'opacity':0}, 1000, function () { 
            $(this).appendTo($('#ticker')).css('opacity', 1); });

    }

    setInterval(function(){ tickOut () }, 5500);

しかし、実際には次の段階ではフェードしないliので、効果は少し厄介です。

誰かが私が必要とする効果を生み出すのを助けるためにいくつかの代替案を提案することができれば、それはとても役に立ちます。

ありがとう

4

2 に答える 2

3

hide()fadein()リストの先頭になった後に要素を呼び出します。

function tickOut(){
        $('#ticker li:first').animate({'opacity':0}, 1000, function () {
            $(this).appendTo($('#ticker'))
            $('#ticker li:first').hide()
            $('#ticker li:first').fadeIn(1000)
              $('#ticker li:not(:first)').css('opacity', '1')
        });
    }

setInterval(function(){ tickOut () }, 5500);

見る：

http://codepen.io/anon/pen/lHdGb

于 2012-11-09T14:40:06.353 に答える
1

私はそのようにします：

function tickOut(){
    $('#ticker li:first').animate({'opacity':0}, 1000, function () { 
            $(this).appendTo($('#ticker')).css('opacity', 1); });
    }
var interval;
$(function() {
    interval = setInterval(function(){ tickOut () }, 5500);
    $('#ticker').hover(function() {
             if(interval)
                 clearInterval(interval);
             $('#ticker li:first').stop();   
             $('#ticker li:first').css('opacity', 1).stop();  
         }, function(){
             interval = setInterval(function(){ tickOut () }, 5500);
             });
});

間隔を$('#ticker').hoverクリアしてアニメーションを停止opacityし、マウスが中に入ったときに 1 に戻りUL(内部の特別な要素だけLIがマウスの下にあるときにそうするように変更される場合があります)、それを離れると再び開始しULます。デモ: http://jsfiddle.net/KFyzq/6/

于 2012-11-09T14:50:02.517 に答える