jQuery click handler acting strange

Question

I have this line of code in my script

$(document).ready(function(){
    $('#faye').click(function() {
        $('#fayebig').fadeIn(1000);
    })
    $('#faye').click(function() {   
        $('#fayebig').fadeOut(500);

    });

What I'm aiming at is when I click #faye, #fayebig should appear (which is does) and when you click again on #faye, #fayebig should disappear.

What my code does though, is when I click on #faye, the #fayebig fades in and then right again fades out, like the script runs the through the whole process without letting me click again to let it fade out.

Hope you catch my drift, it should be fairly easy to deal with this I'm just shooting blanks here with this apparently.

Answer 1

Use fadeToggle() otherwise two of them will happen at same time

$(document).ready(function(){
    $('#faye').click(function() {
        $('#fayebig').fadeToggle(1000);
    });
});

While using fadeToggle it will toggle between fadeIn and fadeOut

If you want different duration for each fade then use

$(document).ready(function(){
    $('#faye').click(function() {
        $('#fayebig').fadeToggle(function(){ return $(this).is(':visible') ? 500 : 1000});
    });
});

Answer 2

In addition to @Pranav answer, you should use "stop(true, true)" function.

$(document).ready(function(){
    $('#faye').click(function() {
        $('#fayebig').stop(true,true).fadeToggle(1000);
    });
});