CODEWITHSUNDEEP
jqueryhtmltoggle
Valentino Ru
Valentino Ru

Reputation: 5052

alternative to fadeToggle() in JQuery

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?

Upvotes: 3

Views: 3560

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

jsBin demo

statC = 0; // just a counter :)

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

Slide toggle and FadeToggle will "detach" the element positions from your DOM, so you can try with .fadeTo([time],[opacity]); The element will just fade the opacity, and not be set as display:none; after the animation is done.

Upvotes: 0

qooplmao
qooplmao

Reputation: 17759

You could always use toggle ( http://api.jquery.com/toggle/ ) and then you have control over each instance.

Fiddle forked from above - 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..
});

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

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/

Upvotes: 5

Related Questions