CODEWITHSUNDEEP
jquery
Julius Pepperwood
Julius Pepperwood

Reputation: 3

jQuery click fadeIn / fadeOut

I have a probably dumb question, but I can't figure it out on my own...

I'd like to alternatively fadeIn / fadeOut two div by cliking on a third one.

Here is a non working example : http://jsfiddle.net/ShLqJ/

Here is the html :

<div id="a"> </div>
<div id="alpha"> ALPHA </div>
<div id="beta"> BETA </div>

The CSS :

#a { width: 200px; height: 40px; line-height: 40px; background-color: red; text-align: center; }
#a:hover { cursor: pointer; }
#alpha, #beta {  width: 200px; height: 100px; margin-top: 20px; }
#alpha { background-color: blue; }
#beta { background-color: green; }

And js :

$(document).ready(function(){
    $('#beta').hide();
    $('#a').click(function() {
        $('#alpha').fadeOut("slow", function() {
             $('#beta').fadeIn();
        });
    });
});

I can do the first animation (fadeOut alpha, fadeIn beta), but on the second click, I'd like to do the inverse and so on...

Any suggestions?

Thanks

Upvotes: 0

Views: 862

Answers (6)

Stefanos Vakirtzis
Stefanos Vakirtzis

Reputation: 448

Jquery makes this really easy here is an example using fadeToggle(): 

$(document).ready(function(){
    $('#a').click(function() {
        $('#alpha').fadeToggle();
        $('#beta').fadeToggle();
    });
});

You just have to start one of the two divs with display: hidden.

Here is the JSFiddle

Upvotes: 0

Abraham Hamidi
Abraham Hamidi

Reputation: 13789

Change your HTML to:

<div id="a">

</div>

<div class="alpha"> ALPHA </div>
<div class="alpha">  BETA </div>

so you can use classes because IDs are unique, and you can control both instead of one by one.

Now you have two options.

1 Use fadeToggle (Javascript):

$(document).ready(function(){
    $('#beta').hide();
    $('#a').click(function() {
        $('.alpha').fadeToggle();
    });
});

DEMO

2 Create a changing variable (Javascript): var alpha = 0; $(document).ready(function(){ $('#beta').hide(); $('#a').click(function() { $('.alpha').fadeTo('slow', alpha); if(alpha == 0) { alpha = 1; }else { alpha = 0; } }); });

DEMO

I would use the first option, because it requires less code and is easier to read.

Upvotes: 0

Jivings
Jivings

Reputation: 23250

I couldn't think of a better way other than using a conditional statement:

http://jsfiddle.net/ShLqJ/10/

$(document).ready(function(){
    var $alpha = $('#alpha'),
        $beta = $('#beta').hide();

    $('#a').click(function() {
        var $in, $out;
        if($alpha.is(':visible')) {
            $in = $beta, $out = $alpha;
        } else {
            $in = $alpha, $out = $beta;
        }

        $out.fadeOut("slow", function() {
             $in.fadeIn();
        });
    });
});

Upvotes: 0

Damien Black
Damien Black

Reputation: 5647

Here is a version that flips between the two:

http://jsfiddle.net/ShLqJ/9/

$(document).ready(function(){
    $('#beta').hide();
    $('#a').click(function() {
       $('#alpha').toggle(500);
       $('#beta').toggle(500);
    });
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).ready(function () {
    $('#beta').hide();
    var el = '#alpha';
    $('#a').click(function () {
        $(el).fadeOut("slow", function () {
            el = el == '#alpha' ? '#beta' : '#alpha';
            $(el).fadeIn();
        });
    });
});

Demo: Fiddle

Upvotes: 1

Ram
Ram

Reputation: 144679

You can select the both elements and filter the visible one, .fadeOut() the visible one and .fadeIn() the hidden one. 

var $e = $('#beta, #alpha').filter('#beta').hide().end();

$('#a').click(function() {
    $e.filter(':visible').fadeOut("slow", function() {
         $e.not(this).fadeIn();
    });
});

http://jsfiddle.net/ShLqJ/8/

Upvotes: 1

Related Questions