将JavaScript函数应用于多个div标签

Question

I have a html page that as on the index page 16 boxes, Inside on box 3 other boxes are there, I want to interchange the inner boxes periodically: One box represented as:

<div class="box" id="Index_one">
<div class="Divbox" id="Box_three"><img src=''  /><p class="overlap"></p></div>
<div class="Divbox" id="Box_two"><img src=''  /><p class="overlap"> </p></div>
<div class="Divbox" id="Box_one"><img src=''  /><p class="overlap"> </p></div>
</div>

As stated before there are 16 of this kind of boxes I have a javascript function that can adequately switch through if it is called once on one box Javascript function is:

function Animation(Id_value) {
/*Image Changer for Index_two*/
var Id_num = Id_value
var x = 0
var Images = new Array("Box_one", "Box_two", "Box_three");
one = setInterval(function() {
    var Id = "div#" + Id_num + "> div#" + Images[x]
    $(Id).fadeOut(1000);
    x++
    if (x==2){
        clearInterval(one)
        two = setInterval(function() {
            x--
            var Di = "div#" + Id_num + "> div#" + Images[x]
            $(Di).fadeIn(1000);
            if (x==0) {
                clearInterval(two)
                three = setInterval(function() {
                    var Iv = "div#" + Id_num + "> div#" + Images[x]
                    $(Iv).fadeOut(1000);
                    x++
                    if (x==2){
                        clearInterval(three);
                        four = setInterval(function() {
                            x--
                            var Vi = "div#" + Id_num + "> div#" + Images[x]
                            $(Vi).fadeIn(1000);
                            if (x==0) {
                                clearInterval(four)
                                five = setInterval(function() {
                                    var Dv = "div#" + Id_num + "> div#" + Images[x]
                                    $(Dv).fadeOut(1000);
                                    x++
                                    if (x==2) {
                                        clearInterval(five)
                                        six = setInterval(function() {
                                            x--
                                            var Vd = "div#" + Id_num + "> div#" + Images[x]
                                            $(Vd).fadeIn(1000);
                                        }, 1000)
                                    }
                                }, 1000)
                            }
                        }, 1000)
                    }
                }, 1000);
            }
        }, 1000);
    }
}, 1000);
/*End of Image Changer*/
};

It does it 3 times, Instead of writing this kind of function custom for all my 16 boxes which i consider redundant, I did this

$(document).ready(function() {
   Animation("Index_one");
   Animation("Index_two");
   Animation("Index_three");
   Animation("Index_four");
   Animation("Index_five");
   Animation("Index_six");
   Animation("Mid_one");
   Animation("Mid_two");
   Animation("Mid_three");
   Animation("Mid_four");
   Animation("bottom_one");
   Animation("bottom_two");
   Animation("bottom_three");
   Animation("bottom_four");
   Animation("bottom_five");
   Animation("bottom_six");
 }

Thinking this should work but did not according to how the function was written, please any help explained properly would be appreciated.

Answer 1

Something like this:

// FIRST OPTION
var divlist = ["Index_one","Index_two","Index_three","Index_four","Index_five","Index_six","Mid_one","Mid_two","Mid_three","Mid_four","bottom_one","bottom_two","bottom_three","bottom_four","bottom_five","bottom_six"];
for (div in divlist) {
    Animation(divlist[div]);
}

// SECOND OPTION 
// (having in mind that box class is applied only on targeted divs
$('.box').each(function() {
    Animation(this.id);
});

Second option is using jQuery each function. It first finds all of div tags with box class and then iterates over them. During the iteration, each of the found div is called in Animation(this).

Answer 2

You can use jQuery.delay() to animate elements sequentially.

HTML:

<input type="button" id="fadeAllOut" value="Fade all out!" />
<div class="box" id="Index_one">
    <div class="Divbox" id="Box_three">
        <img src='' />
        <p class="overlap"></p>
    </div>
    <div class="Divbox" id="Box_two">
        <img src='' />
        <p class="overlap"></p>
    </div>
    <div class="Divbox" id="Box_one">
        <img src='' />
        <p class="overlap"></p>
    </div>
    <!-- as many as you need
    <div class="Divbox" id="Box_one">
        <img src='' />
        <p class="overlap"></p>
    </div>
   -->
</div>

JavaScript:

$(document).on("click", "#fadeAllOut", function (e) {
    var elems = $(".Divbox");

    //variable for accumulating delay
    var delay = 0;

    //needed duration
    var duration = 500;

    $.each(elems, function (index, element) {
        $(element).delay(delay).fadeOut(duration);
        /*or if you want just hide but not remove elements from layout, use this:        
        .animate({
            opacity: 0
        }, duration);*/

        //accumulate delay
        delay += duration;
    });
});

Here is the Demo .

It is just a starting point, trying to understand your requirements

Answer 3

I think, from what it looks like, that the way you called the function (each time with a different id) didn't work because they were starting asynchronously and there for getting entangled in each other's animation. You can use a recursion and call the next function from within the function itself. I also replaced your setInterval and clearInterval calls with setTimeout , this make the code a little cleaner and more readable (and even a bit more efficient). NOTE: I've replaced also the sixth (the last) call to setInterval with setTimeout although you don't clear that one (which is a bug, I think).

var elements = ["Index_one","Index_two","Index_three","Index_four","Index_five","Index_six","Mid_one","Mid_two","Mid_three","Mid_four","bottom_one","bottom_two","bottom_three","bottom_four","bottom_five","bottom_six"];

function Animation(listIndex, elementList) {
   /*Image Changer for Index_two*/
   var Id_value = elementList[listIndex];
   var Id_num = Id_value
   var x = 0
   var Images = new Array("Box_one", "Box_two", "Box_three");
   one = setTimeout(function() {
       var Id = "div#" + Id_num + "> div#" + Images[x]
       $(Id).fadeOut(1000);
       x++
       if (x==2){
           two = setTimeout(function() {
               x--
               var Di = "div#" + Id_num + "> div#" + Images[x]
               $(Di).fadeIn(1000);
               if (x==0) {
                   three = setTimeout(function() {
                       var Iv = "div#" + Id_num + "> div#" + Images[x]
                       $(Iv).fadeOut(1000);
                       x++
                       if (x==2){
                           four = setTimeout(function() {
                               x--
                               var Vi = "div#" + Id_num + "> div#" + Images[x]
                               $(Vi).fadeIn(1000);
                               if (x==0) {
                                   five = setTimeout(function() {
                                       var Dv = "div#" + Id_num + "> div#" + Images[x]
                                       $(Dv).fadeOut(1000);
                                       x++
                                       if (x==2) {
                                           six = setTimeout(function() {
                                               x--
                                               var Vd = "div#" + Id_num + "> div#" + Images[x] 
                                               $(Vd).fadeIn(1000, function(){
                                                 Animation(++listIndex, elementList); // This will call this function with the next index but only when the fadein animation will finish.
                                               });
                                            }, 1000)
                                       }
                                   }, 1000)
                               }
                           }, 1000)
                       }
                   }, 1000);
               }
           }, 1000);
       }
   }, 1000);
   /*End of Image Changer*/
};

Animation(0, elements) // Call the Animation function with the first element index to start it all off

Also, to clean up your code a little, instead of using setInterval (or setTimeout) you can pass the next fadein function as a call back to the jquery fadein method, as the second argument (the complete argument) which will be called when the fadein animation is complete. Like I'v done for the last (six) call to fadein where I call the Animation function with the next element id). You can read about it in jQuery's fadein docs: http://api.jquery.com/fadein/