Question

Hi I am trying to create a jquery function that fades all other divs when one of the div is clicked on. My code isn’t working and I’m not sure how to properly write it. Here is what I have so far:

$("#slider div.popup").hover(
var ind = $(this).index();

$("#slider div.popup").each(function() {
    if ($(this).index() != ind) {
        //fades all other .popup divs
        $(this).animate({
            opacity: 0
        });
    }
}), $("#slider div.popup").each(function() {
    if ($(this).index() != ind) {
        //unfades all other .popup divs
        $('span', this).animate({
            opacity: 1
        });
    }
}

));

There is also an example here : http://jsfiddle.net/7j3mk/

Can someone give me guidance on how to get this code working?

Answer 1

Beside the wrong syntax you use for the hover method (it takes two functions as parameters)
You need to use the .not() ^docs method

$("#slider div.popup").hover( function(){
    $("#slider div.popup").not(this).stop().animate({
            opacity: 0
        });
}, function(){
    $("#slider div.popup").not(this).stop().animate({
            opacity: 1
        });
});

updated example at http://jsfiddle.net/gaby/7j3mk/11/