如何在jQuery中

http://jsfiddle.net/SVtJV/16/如何在jQuery中

$(document).ready(function() { 
    for (var i=0; i<3; i++) { 
     setTimeout(function() { 
      $("#footer-address").fadeOut(400); 
     }, 2000); 
     setTimeout(function() { 
      $("#footer-address").fadeIn(400).html("<strong>Our Place</strong> New Address Location"); 
     }, 2400); 
     i++; 
    } 
});

我試圖得到一個代碼塊與setTimeout功能，就像一個3或4次循環運行兩個HTML片段之間褪色。從邏輯上講，我可以看到我的代碼在for循環中不會重複，可能是因爲setTimeout時間值已經過去了。

有沒有辦法在循環之前重置時間值？還是有更好的方法來執行最終目標？

來源

2013-02-26 Tylerppp

2我看到的東西......你正在遞增'i'兩次，並且你沒有在任何時候返回'$（'＃footer-address'）。html（）'到它的原始狀態。 – isherwood 2013-02-26 17:14:02

每個for循環都不會等待超時完成，整個for循環在20 ms內完成：D如果要重複淡入淡出，則必須使用回調做一些小函數。

$(document).ready(function() { 
    var repeats = 4, 
     times = 0, 
     fade = function() { 
      if (times >= repeats) return false; 
      times++; 
      $('#footer-address').fadeTo(400, 0, function() { 
       $('#footer-address').html('text 1'); 
       $('#footer-address').fadeTo(400, 1, function() { 
        setTimeout(fade, 1000); 
       }); 
      }); 
     }; 

    setTimeout(fade, 1000); 
});

而我沒有完全得到你想用.html（）做什麼。要不斷改變？

已編輯。

來源

2013-02-26 17:14:09 Alex

謝謝，我只是試圖讓「我們搬家了......」替換爲「新地址」。 .html（）旨在將新文本插入到＃頁腳地址標識中。 – Tylerppp 2013-02-26 18:43:24

我覺得這是最乾淨的解決方案

See it here on jsfiddle

$(function() { 
    var times = 3, 
     elem = $('#footer-address') 
     fader = setInterval(function() { 
      elem.fadeOut(400, function() { 
       elem.fadeIn(400); 
      }); 
      if (--times === 0) { 
       clearInterval(fader); 
      } 
     }, 1200); 
});

，直到你滿意的結果扭捏時序數。

來源

2013-02-26 17:30:54

但是，如何讓元素在「我們移動...」到「新地址」之間切換？ – Tylerppp 2013-02-26 19:17:03

正如其他人所提到的，你在兩個地方（在for事後和在循環體內）增加了i，因此刪除主體分配是第一個要修復的部分。另外，原始HTML不會被「放回」。

但是，這不是主要問題。 JavaScript正在執行循環（兩次），所以全部 fadeOut/fadeIn函數分別在2000/2400毫秒後執行，而不是在超時後執行。您可以在演示中輸入console.log(i);或alert(i);來代替i++，並在頁面加載完成後立即看到3條日誌行/警報。

我會將標記置爲HTML，而不是在JavaScript中創建標記，然後在2個HTML片段之間淡出，例如參見demo或以下示例代碼。

HTML

<div id="footer-address"> 
    <span><strong>We have moved!</strong> Our new address is:</span> 
    <span><strong>Our Place</strong> New Address Location</span> 
</div>

CSS

#footer-address { 
    margin-bottom: 2px; 
    text-transform: uppercase; 
    margin: 0; 
    padding: 0; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 10px; 
} 

#footer-address span:last-child { 
    display:none; 
}

的JavaScript（需要的jQuery）

var $footer = $('#footer-address'); 
var i = 0; 

(function swap(){ 
    var $hiddenSpan = $footer.find('span:hidden') 

    $footer.find('span:visible').fadeOut(400, function() { 
     $hiddenSpan.fadeIn(400) 
    }) 

    if (i++ < 3) setTimeout(swap, 2000) 
})();

的JavaSc ript使用自我執行功能（見http://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/），每2秒間隔運行3次。我還利用jQuery .fadeOut()函數的回調（秒）參數，以便在之後啓動.fadeIn()fadeOut完成。

我相信這裏有改進的空間，但希望它仍然有用。

來源

2013-02-26 17:40:18 andyb

太棒了！感謝您的教訓。 – Tylerppp 2013-02-26 18:48:16

嗯，實現在小提琴演示中看起來很棒，但在我的網站上卻不太好。這裏是我的網站代碼： – Tylerppp 2013-02-26 19:33:33

'code' \t

「代碼」 – Tylerppp 2013-02-26 19:39:19

如何在jQuery中

回答

相關問題