jquery - 替代 JQuery 中的 fadeToggle()

Question

我有一个div我想在单击按钮时显示/隐藏的内容。的排列div是

<div id="someStats">
</div>
<div id="mainContent">
</div>
<div id="someOtherStats">
</div>

，意思是从mainContent我控制是否显示或隐藏两个信息div的左右。这给了我以下问题：不仅fadeToggle()使div' 之一透明，其display属性设置为，这会导致淡出时none的位移。是否有不指定两个函数的替代方法（或拆分一个函数，如mainContentsomeStatsfadeToggle()

if(div.isShown()){
   hide() 
}else{ 
   show()
}

? 或者我可以fadeToggle()以某种方式操纵吗？

Answer 1

您可以为不透明度设置动画

var target = $('#someStats'),
    opacity = target.css('opacity');

target.animate({opacity: (opacity==1?0:1)});

演示在 http://jsfiddle.net/gaby/MNhcU/

Answer 2

jsBin 演示

statC = 0; // just a counter :)

$('#mainContent').click(function(){ 
  $('#someStats').fadeTo(300, statC++%2 ); // 1,0,1,0,1,0,.....
});

滑动切换和 FadeToggle 将从 DOM 中“分离”元素位置，因此您可以尝试使用.fadeTo([time],[opacity]);The element will just fade the opacity, 而不是display:none;在动画完成后设置。

Answer 3

您始终可以使用切换 ( http://api.jquery.com/toggle/ )，然后您可以控制每个实例。

小提琴从上面分叉 - http://jsfiddle.net/hpaMV/

$('#some').toggle(function(){
    $('#someStats').animate({opacity: 1});
    ..anything else..
}, function(){
    $('#someStats').animate({opacity: 0});
    .. the opposite of the previous anything else..
});