试图掌握 JQuery。处理链接图像淡入淡出但同时淡入淡出

Question

使用一些我几乎没有经验的 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?

Answer 1

您实际上不能使用这样的超时，因为它们都将同时开始。

您必须将这些操作“链接”在一起。这是一个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');
    })});

});