Can't combine 2 selectors

Question

I have a script that fades out a picture with a pause and later fade it back in. I want to add some more elements to the script so they all fade out at the same time (if I have separate scripts they don't fade at the same time).

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

The script works fine if I only use one selector, t.ex. var fadeinBox = $("**#box2**") . However, if I have many they don't work.

Answer 1

You were pretty close. We are going to utilize promises here to make sure the functions run in the proper order.

We return .promise() from the fadeIn() , add a .done() call to that inside which we do the fadeOut() and return the .promise() for it. By returning another promise we can then attach a second .done() to the chain to flip the pointers and set the timeout.

 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> 

References:

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

Answer 2

(Presuming I understood the question correctly) I believe the issue you are running into here is that:

1. You are collecting items on page ready, eg: var fadeinBox = $("#box2, #icons1");
2. New content is being added to the DOM
3. the fade function is being called but the "new" elements are not being "fade()'ed"

The issue is that when ever you call jQuery() it only collects the elements it can see at the time the query is called.

For you code to work you probably will need to move your selectors into your function call so it re-queries for elements each time its called, eg:

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

Something else to consider if you can is using classes instead of id's if it makes sense for your application. Even though most browsers will tolerate multiple elements with duplicate id tags, its not good practice.