なぜこの単純なjQueryブロックが動作しないのですか？

Question

jQueryの：

$(document).ready(function() { 
    $("#links .button").click(function() { 
     var id = $(this).attr("id") + "-fade"; 
     $("#sliding-blocks").fadeOut(100); 
     $("#" + id).fadeIn(300); 
    }); 
}); 

と簡体HTML：非単純化されたHTMLの命名規則と同じ "フェード" 以下#linksと#sliding-blocksが、すべてではより多くのエントリが含まれ

<table id="links"> 
    <tr> 
     <td> 
      <div id="projects" class="button"> 
       Projects 
      </div> 
     </td> 
    </tr> 
</table> 

<table id="sliding-blocks"> 
    <tr> 
     <td> 
      <span id="projects-fade" class="block"> 
       <img class="icon" src="github.png" height="20" width="20" /> 
      </span> 
     </td> 
    </tr> 
</table> 

。

何らかの理由で、私は働くことができません（私が働くことさえできません）。そして、はい、私はjQueryをロードしました。

ソリューション：

$(document).ready(function() { 
    var blocks = ["projects-fade", "blog-fade", "online-fade", "resume-fade"]; 
    $("#links .button").click(function() { 
     var id = this.id + "-fade"; 
     $("#sliding-blocks").fadeOut(100,function() { 
      $.each(blocks, function() { 
       $("#" + this).hide(); 
      }); 
      $("#" + id).show(); 
      $(this).fadeIn(300); 
     }); 
    }); 
}); 

Answer 1

あなたがフェードインしようとしている要素の先祖をフェードアウトしましたので。

を祖先がフェードアウトされると、その子孫のどれも表示されなくなります。私はあなたがこのような何かを探していると仮定し

...

$(document).ready(function() { 
    $("#links .button").click(function() { 
     var id = this.id + "-fade"; 
     $("#sliding-blocks").fadeOut(100,function() { 
      $("#" + id).show(); 
      $(this).fadeIn(300); 
     }); 
    }); 
}); 

Answer 2

あなたのフェードアウト#sliding-blocksテーブル、およびそれの一つの要素をフェードインが、テーブル自体はまだフェードアウトされます。代わりに、すべて.blockの要素をフェードアウトしてから、必要なものをフェードインして、テーブルを常に表示したままにしておく必要があります。

Answer 3

あなたはブロックをスライド隠していると、その後your'reは、それの子要素をフェードインしようとしている。それはないだろう親コンテナとしての作業slide-blocks is invisible