Multiple Methods in a jQuery Event

Question

I'm having some difficulty with writing some jQuery code. What i'm trying to do is pass multiple methods through an event handler like so $(foo).click(methodOne , methodTwo); The purpose of the first method is to fade out the current view and then hide it and the purpose of the second method is to display an alternate view. For whatever reason click is only accepting one method, and I'm quite positive that it can accept at least 2. Here is the code:

$(document).ready(function(){
    $("#slide1").hide();
    $(".items img").click(function() {

        if ($(this).hasClass("active")) { return; }

        $(".items img").removeClass("active");
        $(this).addClass("active");

        $(".slide1").click(fadeOut,showSlide1);
        $(".slide0").click(fadeOut,showSlide0);
    }); 

});


function fadeOut() {
$(this).stop().fadeTo("medium", 0);
$(this).hide();
}

//Slide 0 has been clicked
function showSlide0(){
$("#slide0").stop().fadeTo("medium", 1);
}                                   

//Slide 1 has been clicked
function showSlide1(){
$("#slide1").stop().fadeTo("medium", 1);
}

Answer 1

No - .click() only accept one function. (And I'm pretty sure)

But we can work on what you're trying to do.

your code is simplified below,

$(".slide1,.slide0").click(fadeOut);

function fadeOut() {
$(this).stop()
       .fadeTo("medium", 0)
       .hide()
       .fadeTo("medium", 1);

}

Which gives me a scratch in the head. what are you trying yo achieve??

or maybe your looking for .toggle() ?

Answer 2

One problem you have is that fadeOut is already a jQuery function. As a result, you're going to get a conflict here.

If you are trying to do a toggle, you'll want to do something like this - this will toggle between showing the slides and fading them (however, because they're not always shown, this can be problematic):

$("#slide0, #slide1").toggle(showSlide, fade);

However...what I think you are trying to do is more like this:

<script>
$(".showSlides").click(showSlides);

$('#slide0, #slide1').hide();
$("#slide0, #slide1").click(fade);

function showSlides() {
    $('#slide0, #slide1').fadeTo("medium", 1);
    $(this).fadeTo('medium', 0);
}

function fade() {
    $(this).stop().fadeTo("medium", 0);
}​
</script>

<div class="showSlides">Show the Slides (Click Me)</div>
<div id="slide0">Slide 0 (Click Me)</div>
<div id="slide1">Slide 1 (Click Me)</div>​

This will toggle showing and hiding your slides when you click on them. You can see the results here: http://jsfiddle.net/M6G5S/