다른 "열린"및 "이미 열려있는 경우"효과를 JQuery에 추가하십시오.

Question

다른 링크를 누르면 다른 내용을 표시하는이 JQuery 스크립트를 찾아서 사용자 정의했습니다.

targetDiv가 이미 표시되어 있으면 변경 효과가 희미 해지기를 바랍니다. 따라서 targetDiv를 열고 닫을 때만 슬라이드 효과가 적용됩니다.

또한 페이지로드시 약 0.5 초 만에 콘텐츠가 눈에 띄게 나타나는 이유를 알 수 없습니다. 그걸 피할 ​​수 있을까요? http://jsfiddle.net/XwN2L/179/

JQuery와 (최신 버전) :

jQuery(function(){ 
    jQuery('.targetDiv').hide(); 

    jQuery('#close').click(function(){ 
       jQuery('.targetDiv').slideUp(); 
    }); 

     jQuery('.showSingle').click(function(){ 
       jQuery('.targetDiv').hide(); 
       jQuery('#div'+$(this).attr('target')).slideDown(); 
     }); 
}); 

HTML :

<div class="buttons"> 
<a class="showSingle" target="1">Div 1</a> 
<a class="showSingle" target="2">Div 2</a> 
<a class="showSingle" target="4">Div 4</a> 
<a id="close">Close</a> 
</div> 

<br><br><br><br> 
Lorem Ipsum<br> 

<div id="div1" class="targetDiv"> 
<iframe width="420" height="315" src="http://www.youtube.com/embed/c1_LON8Ib2o" frameborder="0" allowfullscreen></iframe> 
</div> 

<div id="div2" class="targetDiv"> 
<iframe width="420" height="315" src="http://www.youtube.com/embed/s4GbpG-PypM" frameborder="0" allowfullscreen></iframe> 
</div> 

<div id="div4" class="targetDiv"> 
<iframe width="560" height="315" src="http://www.youtube.com/embed/DHef3iAjxiM" frameborder="0" allowfullscreen></iframe> 
</div> 
Lorem Ipsum 

Answer 1

작업 데모http://jsfiddle.net/efgFL/2/

사용여기

는 JSFiddle에링크 : http://api.jquery.com/visible-selector/

두 번째 부분에 대해서는 blah 텍스트가 표시/숨기기가 발생하는 컨테이너에 없습니다. 이 도움이

희망,

코드 * "는 targetDiv 이미 볼 수 있습니다"* 사용 '에 대한

jQuery(function(){ 
    jQuery('.targetDiv').hide(); 

    jQuery('#close').click(function(){ 
       jQuery('.targetDiv').slideUp(); 
    }); 

     jQuery('.showSingle').click(function(){ 
      if(jQuery('.targetDiv').is(':visible')){ 
       jQuery('.targetDiv').hide(); 
       jQuery('#div'+$(this).attr('target')).fadeIn(); 
      }else{ 
       jQuery('.targetDiv').hide(); 
       jQuery('#div'+$(this).attr('target')).slideDown(); 
      } 
     }); 
});​