jQuery的嵌套效果循環動畫

我有一個嵌套函數來顯示/隱藏段落新聞股票樣式。jQuery的嵌套效果循環動畫

問題是，當循環開始（第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(); 
});

來源

2008-11-15 willoller

爲什麼會出現淡入淡出後跟着.animate（{opacity：100}）？他們獲得的效果幾乎相同 – 2008-11-15 01:49:03

它被用來延遲下一個動作10秒，而不是使用setTimeout或setInterval。 – 2008-11-15 18:39:43

問題是線9：

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

不透明度應該是「1」（不透明度爲0之間的值和1）

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

來源

2008-11-15 02:18:05 Owen

動畫方法與不透明度無關。它僅用於控制在隱藏之前顯示文本多長時間的延遲。 – 2008-11-16 17:21:32

這不是動畫，這是問題，它將不透明度設置爲100，這不是有效結果，不透明度是0和1之間的值。複製並測試其代碼，然後將不透明度更改爲1，如同我的示例中他會看到他提到的突然停止的動畫將會消失。 – Owen 2008-11-16 23:28:43

嘗試這種情況：


      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-15 02:23:26 Andy

解決方案已經公佈，但有評論：

如果一組元素將要立即隱藏，這是更快地創建一個「隱藏」的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-16 00:34:56

對代碼進行輕微的重構，以保存使用相同選擇器重複創建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-16 17:18:32

jQuery的嵌套效果循環動畫

回答

相關問題