0

私がほとんど経験していないいくつかのJQueryで作業し、使用しようとしています 

window.setTimeout(function() {

4 つの異なる画像のフェードインをチェーンします。ただし、それらは同時にフェードインし続けます。私が間違っていることを理解できません。何か案は？ありがとうございました！

:javascript
  $(document).ready(function($){
    //$('.container.front-end h1').html($('.container.front-end h1').html().
    replace('&amp;', '<div class="h1-specialchar">&amp;</div>'));

    window.setTimeout(function() {
      $('#fade1').removeClass('transparent').addClass('fadeInDown');
    },1000);
    window.setTimeout(function() {
      $('#fade2').removeClass('transparent').addClass('fadeInDown');
    },2000);
    window.setTimeout(function() {
      $('#fade3').removeClass('transparent').addClass('fadeInDown');
    },3000);
    window.setTimeout(function() {
      $('#fade4').removeClass('transparent').addClass('fadeInRight');
    },4000);
  });

.row
  .span5{:style => "width: 400px;"}
    .pad-bottom70
    =image_tag(@page.photos[1].image_url(:full), :id => "fade1", :class => "animated fadeInDown") if @page.photos[1].image?
    .pad-bottom10
    =image_tag(@page.photos[2].image_url(:full), :id => "fade2", :class => "animated fadeInDown") if @page.photos[2].image?
    .pad-bottom5
    =image_tag(@page.photos[3].image_url(:full), :id => "fade3", :class => "animated fadeInDown") if @page.photos[3].image?
  .span7
    - unless @page.photos.empty?
      .pad-bottom70
      =image_tag(@page.photos[0].image_url(:full), :id => "fade4", :class => "animated fadeInRight") if @page.photos[0].image?
4

1 に答える 1

2

それらはすべて同時に開始されるため、実際にはそのようなタイムアウトを使用することはできません。

アクションを一緒に「連鎖」する必要があります。ここにjsfiddleがあります： http://jsfiddle.net/vooboo13/Dp2SF/1/

私の例では、画像がないため s を使用していますが、次のようにしました。

$(document).ready(function(){

    $("#box1").fadeIn('slow').delay(1000).queue(function(){                                 
        $("#box2").fadeIn('slow').delay(1000).queue(function(){
            $("#box3").fadeIn('slow');
    })});

});
于 2012-10-04T20:57:38.197 に答える