Kann 2 Selektoren nicht kombinieren

Question

Ich habe ein Skript, das ein Bild mit einer Pause ausblendet und es später wieder einblendet. Ich möchte dem Skript weitere Elemente hinzufügen, damit alle gleichzeitig ausgeblendet werden (wenn ich separate Skripte haben, die nicht gleichzeitig ausgeblendet werden).

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(); 

Das Skript funktioniert gut, wenn ich nur einen Selektor verwende, t.ex. var fadeinBox = $("**#box2**"). Aber wenn ich viele habe, funktionieren sie nicht.

Answer 1

(vorausgesetzt ich die Frage richtig verstanden) Ich glaube, das Problem, das Sie in hier ausgeführt sind, ist, dass:

1. Sie sammeln Artikel auf Seite bereit, zB: var fadeinBox = $ ("# box2, # icons1 ");
2. neue Inhalte auf das DOM
3. die Fade-Funktion aufgerufen wird, aber die „neue“ Elemente werden nicht „fade() 'ed“

Das Problem ist, dass, wann immer Sie nennen hinzugefügt wird jQuery() sammelt nur die Elemente, die zum Zeitpunkt des Aufrufs der Abfrage angezeigt werden.

Für Sie Code arbeiten Sie wahrscheinlich benötigen, um Ihre Wähler in Ihren Funktionsaufruf zu bewegen, um es wieder Anfragen für Elemente seines jedes Mal aufgerufen, zB:

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); 
    }); 
} 

Etwas anderes zu berücksichtigen, wenn Sie können ist Verwenden von Klassen anstelle von IDs, wenn dies für Ihre Anwendung sinnvoll ist. Obwohl die meisten Browser mehrere Elemente mit doppelten ID-Tags tolerieren, ist dies keine gute Übung.

Answer 2

Sie waren ziemlich nah dran. Wir werden Versprechungen nutzen, um sicherzustellen, dass die Funktionen in der richtigen Reihenfolge ausgeführt werden.

Wir .promise() vom fadeIn() zurückzukehren, fügen Sie ein .done() Anruf an diese innen, die wir die fadeOut() und geben die .promise() dafür tun. Durch das Zurücksenden eines anderen Versprechens können wir dann eine zweite .done() an die Kette anhängen, um die Zeiger umzudrehen und die Zeitüberschreitung einzustellen.

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>

Referenzen:

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