無法合並2個選擇器

Question

我有一個腳本，該腳本會淡出帶有暫停的圖片，然后再將其淡入。我想向腳本中添加更多元素，以便它們都同時淡出（如果我有單獨的腳本，它們不會在淡出時淡出）同一時間）。

var fadeinBox = $("#box2, #icons1");
var fadeoutBox = $("#box1, #icons2");

function fade() {
    fadeinBox.stop(true, true).fadeIn(2000);

    fadeoutBox.stop(true, true).fadeOut(2000, function() {
        var temp = fadeinBox;
        fadeinBox = fadeoutBox;
        fadeoutBox = temp;
        setTimeout(fade, 2000);
    });
}

fade();

如果我僅使用一個選擇器t.ex，則腳本可以正常工作。 var fadeinBox = $("**#box2**") 。 但是，如果我有很多，它們將不起作用。

Answer 1

你很近。 我們將在此處利用Promise確保功能按正確的順序運行。

我們從fadeIn()返回.promise() ，在內部執行fadeOut()調用中添加一個.done()調用，並.promise()返回.promise() 。 通過返回另一個promise，我們可以將第二個.done()附加到鏈上以翻轉指針並設置超時。

 var $fadeIn = $("#box2, #icons1"); var $fadeOut = $("#box1, #icons2"); function fade() { $fadeIn .fadeIn(2000) .promise() .done(function () { return $fadeOut .fadeOut(2000) .promise(); }) .done(function() { var $temp = $fadeIn; $fadeIn = $fadeOut; $fadeOut = $temp; setTimeout(fade, 2000); }); } fade(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box1">Box 1</div> <div id="box2">Box 2</div> <div id="icons1">Icons 1</div> <div id="icons2">Icons 2</div> 

參考文獻：

• https://api.jquery.com/promise/

Answer 2

（假設我正確理解了這個問題）我認為您遇到的問題是：

1. 您正在准備頁面上的項目，例如：var fadeinBox = $（“＃box2，＃icons1”）;
2. 新內容正在添加到DOM
3. 淡入淡出功能被調用，但“新”元素沒有被“淡入淡出”

問題在於，無論何時調用jQuery（），它僅收集在調用查詢時可以看到的元素。

為了使代碼正常工作，您可能需要將選擇器移入函數調用中，以便每次調用它時都重新查詢元素，例如：

function fade() {
    var fadeinBox = $("#box2, #icons1");
    var fadeoutBox = $("#box1, #icons2");

    fadeinBox.stop(true, true).fadeIn(2000);

    fadeoutBox.stop(true, true).fadeOut(2000, function() {
        var temp = fadeinBox;
        fadeinBox = fadeoutBox;
        fadeoutBox = temp;
        setTimeout(fade, 2000);
    });
}

如果對您的應用程序有意義，那么是否可以使用類而不是id還要考慮。 即使大多數瀏覽器都可以使用重復的id標簽來容忍多個元素，但這並不是一個好習慣。