HTML：

Question

我有一个html页面，在索引页面上有16个框，在框3的其他框中，我想定期交换内框：一个框表示为：

<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>

如前所述，这种盒子中有16种我有一个javascript函数，如果在一个盒子上调用一次就可以充分切换 Javascript函数是：

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*/
};

它做了3次，而不是为我认为多余的所有16个盒子编写这种函数自定义，我做了这个

$(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");
 }

认为这应该有效，但没有根据函数的编写方式，请提供任何正确解释的帮助。

Answer 1

这样的事情：

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

第二个选项是使用jQuery的每个函数。它首先找到带有box类的所有div标签，然后迭代它们。在迭代期间，每个找到的div都在Animation（this）中调用。

Answer 2

您可以使用jQuery.delay()按顺序为元素设置动画。

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

这是Demo。

这只是一个起点，试图了解您的要求

Answer 3

我认为，从它的外观来看，你调用函数的方式（每次使用不同的id）都不起作用，因为它们是异步启动的，并且在那里被纠缠在彼此的动画中。您可以使用递归并从函数本身调用下一个函数。我还将setInterval和clearInterval调用替换为setTimeout，这使代码更清晰，更易读（甚至更高效）。注意：我已经用setInterval替换了对setTimeout的第六次（最后一次）调用，尽管你没有清除那个（我认为这是一个错误）。

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

另外，要稍微清理一下代码，而不是使用setInterval（或setTimeout），你可以将下一个fadein函数作为第二个参数（完整参数）传递给jquery fadein方法。在fadein动画完成时调用。就像我在最后一次（六次）调用fadein所做的那样，我用下一个元素id调用了Animation函数。你可以在jQuery的fadein文档中阅读它： http://api.jquery.com/fadein/

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

3 个答案:

HTML：

的JavaScript：

这是Demo。