Question

我需要优化以下代码。使用FOR尝试，但图像一次显示。

使用以下解决方案，但未进行优化。

$(document).ready(function(){



function fadeInOut () {

     var $element1 = $('a#imagem01');
     var $element2 = $('a#imagem02');
     var $element3 = $('a#imagem03');
     var $element4 = $('a#imagem04');
     var $element5 = $('a#imagem05');
     var $element6 = $('a#imagem06');



     $element1.fadeIn(2000, function () {
     $element1.fadeOut(2000, function () {

     $element2.fadeIn(2000, function () {
     $element2.fadeOut(2000, function () {


     $element3.fadeIn(2000, function () {
     $element3.fadeOut(2000, function () {


     $element4.fadeIn(2000, function () {
     $element4.fadeOut(2000, function () {

     $element5.fadeIn(2000, function () {
     $element5.fadeOut(2000, function () {

     $element6.fadeIn(2000, function () {
     $element6.fadeOut(2000, function () {

     fadeInOut();  

     });});});});});});});});});});});});

     }

     fadeInOut();

});

我需要帮助！

Answer 1

function fadeInOut() {
    var elements = ['a#imagem01', 'a#imagem02', 'a#imagem03', 'a#imagem04', 'a#imagem05', 'a#imagem06'];
    var index = 0;
    var loopForever = false;

    (function() {
        var selfFunction = arguments.callee;
        if((loopForever) && (index > elements.length-1)) index = 0;

        if(index <= elements.length-1) {
            $(elements[index++]).fadeIn(2000, function() {
                $(this).fadeOut(2000, selfFunction);
            });
        }
    })();
}

未经测试，但这些方面的内容应该可以解决问题。它基本上是一个遍历所有元素的回调循环。

Answer 2

$(document).ready(function() {
    $("div").hide();
    var obj = [$("#o1"), $("#o2"), $("#o3"), $("#o4"), $("#o5")];
    var i = 0;
    var interval = setInterval(function() {
            obj[i].fadeIn(2000);
            obj[i].fadeOut(2000);
            i++;
            if (i > 4) {
                clearInterval(interval)
            }
        },
        4000
    );
});

我很确定上面的解决方案更好，但是this would work too ..

在jquery中优化这个循环

2 个答案: