4

ニュース ティッカー スタイルの段落を表示/非表示にするネストされた関数があります。

問題は、ループが最初からやり直すと (4 行目)、不透明効果が正しく機能しなくなり、段落が突然表示されることです。

これについて知っているjqueryマスターはいますか？私はこれを難しくしすぎていますか？

$('#special-ticker p').hide();
var a=0;
function outer() {
    function inner() {
        if(a===$('#special-ticker p').length) { a = 0; }
        $('#special-ticker p').
        eq(a).
        fadeIn(800, function(){
            $(this).animate({opacity:100},10000,null,function(){
                $(this).hide(800,function(){
                    a++;
                    outer();
                });
            });
        });
    }
    return inner();
}
$(function(){ 
    outer(); 
});
4

4 に答える 4

5

問題は 9 行目です。

$(this).animate({opacity:100},10000,null,function(){
//...

不透明度は「1」にする必要があります（不透明度は0と1の間の値です）

$(this).animate({ opacity : 1 }, 10000, null, function() {
于 2008-11-15T02:18:05.427 に答える
1

解決策が投稿されましたが、1 つのコメント:

要素のグループがすぐに非表示になる場合は、「非表示」の CSS クラスを作成してからそれらの要素に割り当てる方が高速です。少しの JavaScript コードを節約しますが、非表示の要素が画面上で短時間点滅しないようにします。

<style type="text/css" media="screen">
.hidden { display: none; }
</style>

<p>Show me</p>
<p class="big hidden">Use javascript to show me later.</p>
于 2008-11-16T00:34:56.693 に答える
1

同じセレクターで jQuery インスタンスを繰り返し作成する手間を省くために、コードを少し修正しました。こちらも読みやすいと思います。

var jS = $('#special-ticker p');
// jS.hide(); // not needed if css hides elements initially
var i = 0;

function do_ticker() {
  jS.eq(i).fadeIn(800, function() {
    var me = $(this);     
    setTimeout(function() { me.hide(800, 
      function() { 
        i = ++i % jS.length;
        do_ticker();
      });
    },1000); // setTimeout
  });
};
do_ticker();
于 2008-11-16T17:18:32.333 に答える
1

これを試して：


            newsticker = function (selector) {
                $(selector).hide();
                var i = $(selector).length - 1;
                var toggle = function() {
                    $(selector).eq(i).fadeOut("slow", function() {
                        i = ++i % $(selector).length;
                        $(selector).eq(i).fadeIn("slow", function() {
                            setTimeout(toggle, 1000)
                        });

                    });
                };          
                toggle();
            };

これで初期化します：


            new newsticker("#special-ticker p");
于 2008-11-15T02:23:26.930 に答える