JQuery中fadeToggle()的替代方案是什么？

Question

我有一个

，希望在点击按钮时显示/隐藏。这些

的排列是

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

这里的意思是，从mainContent中我可以控制是否显示或隐藏两个信息div的左右。这带给我以下问题：不仅fadeToggle()使其中一个div变为透明，它的display属性也被设置为none，这会导致在淡出someStats时mainContent产生位移。有没有不需要指定两个函数（或拆分函数）的fadeToggle()替代方法？

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

我能否以某种方式操纵fadeToggle()？

- Valentino Ru

---

正如标题所提到的，该方法的名称是_fadeToggle_而不是_toggleFade，你所说的“指定两个函数”是什么意思？ - Ram

那是一个拼写错误。已经更正了问题并添加了“指定两个函数”的解释。 - Valentino Ru

Answer 1

您可以只对不透明度进行动画处理

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

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

Demo at http://jsfiddle.net/gaby/MNhcU/

- Gabriele Petrioli

Answer 2

jsBin演示

statC = 0; // just a counter :)

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

Slide toggle和FadeToggle将“分离”元素位置与您的DOM，因此您可以尝试使用.fadeTo([time],[opacity]);元素只会淡化不透明度，并在动画完成后不设置为display:none;

- Roko C. Buljan

Answer 3

你可以随时使用 toggle (http://api.jquery.com/toggle/)，这样你就可以控制每个实例了。

从上面分叉的 Fiddle - 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..
});

- qooplmao