Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Можно ли как-нибудь изменить конструкцию?

Автор: Guedda 21.11.2011, 17:13

Доброго времени суток.
Столкнулся с такой проблемой: есть несколько блоков, и мне необходимо, чтобы они анимационно появлялись один за другим. Ничего кроме этого:

Код


jQuery(document).ready(function(){
    jQuery('#box_1').animate({opacity: 1}, 1000, "linear", function(){
        jQuery('#box_2').animate({opacity: 1}, 1000, "linear", function(){
            jQuery('#box_3').animate({opacity: 1}, 1000, "linear", function(){
                jQuery('#box_4').animate({opacity: 1}, 1000, "linear", function(){
                    jQuery('#box_5').animate({opacity: 1}, 1000, "linear", function(){
        
                    });
                });
            });
        });
    });
});

придумать не смог. Может есть поизящнее что-то, да я об этом не знаю?

Заранее благодарен за ответы.

Автор: $дмитрий 21.11.2011, 17:41

Код


jQuery(document).ready(function(){
    var animation = function(n){
     jQuery('#box_'+n).animate({opacity: 0}, 1000, "linear", function(){animation(++n)});
    }
    animation(1);
});

Автор: ksnk 21.11.2011, 18:33

можно воспользоваться queue-dequeue

Код


var $x=jQuery('#box_1');
$x.animate({opacity: 0.5}, 1000, "linear")
    .queue( function(){
      jQuery('#box_2').animate({opacity: 0.5}, 1000, "linear",function(){$x.dequeue()});
    })
    .queue( function(){
      jQuery('#box_3').animate({opacity: 0.5}, 1000, "linear",function(){$x.dequeue()});
    })
    .queue( function(){
        jQuery('#box_4').animate({opacity: 0.5}, 1000, "linear",function(){$x.dequeue()});
    })
    .queue( function(){
        jQuery('#box_5').animate({opacity: 0.5}, 1000, "linear",function(){$x.dequeue()});
    });

Автор: Guedda 21.11.2011, 20:11

Спасибо всем. воспользовался вариантом земляка )