向JQuery添加不同的“打开”和“如果已经打开”效果

Question

我找到并定制了这个JQuery脚本，当不同的链接被按下时，它显示不同的内容。

但是，当targetDiv已经可见时，我希望更改效果淡入淡出，所以当您打开和关闭targetDiv时，它只有幻灯片效果。

另外，我无法弄清楚为什么内容在页面加载大约半秒内可见。我能避免吗？

这是对的jsfiddle：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/

使用is(':visible')链接：http://api.jquery.com/visible-selector/

对于第二部分blah文本不在任何显示/隐藏发生的容器中，这就是为什么。

希望这有助于

代码

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(); 
      } 
     }); 
});​