I have a div that I want to show/hide when clicking a button. The arrangement of the div's is
<div id="someStats">
</div>
<div id="mainContent">
</div>
<div id="someOtherStats">
</div>
, meaning that from the mainContent I control whether to show or hide the two info div's left and right. That gives me following problem: not only fadeToggle() makes one of the div's transparent, its display attribute is set to none, which causes a displacement of the mainContent when fading out someStats. Are there alternatives to fadeToggle() without specifing two functions (or splitting a function like
if(div.isShown()){
hide()
}else{
show()
}
? Or can I manipulate fadeToggle() in some way?
You can just animate the opacity
var target = $('#someStats'),
opacity = target.css('opacity');
target.animate({opacity: (opacity==1?0:1)});
Demo at http://jsfiddle.net/gaby/MNhcU/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With