왜이 간단한 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

당신이 블록 슬라이딩 숨어있어 다음 END_LINK하면 관심있는가에의 자식 요소를 페이드하려고합니다. 그하지 않습니다 부모 컨테이너로 작동 슬라이딩 블록이 보이지 않음