Question

I have 7 buttons (all of full opacity to begin with), when the mouse enters one button I want all buttons apart from the button that’s being hovered over to fade to 0.4. Only problem is is that it appears that the fadeTo effect (in the following loop I’ve coded) is working sequentially, so I’m left with a sluggish fade effect, not very responsive at all.

    $('.button').mouseenter(function (event) {
        $('#' + $(event.target).attr('id')).fadeTo(200, 1);
        $('.button').each(function (i, obj) {
            if ($(this).attr('id') != $(event.target).attr('id'))
                $(this).fadeTo(200, 0.4);
        });
    });

Any ideas how I can achieve this another way??

Answer 1

This is a much simpler way of doing it:

$('.button').mouseenter(function (event) {
    $(this).stop(true, true).fadeTo(200, 1);
    $('.button').not(this).stop(true, true).fadeTo(200, 0.4);        
});

JSFiddle Example

To fade in all the buttons when you arent hovering over any of then surround the buttons in a div with the id buttonContainer which has no padding and this code should work:

$('#buttonContainer').mouseleave(function(e) {
    $('.button').stop(true, true).fadeTo(200, 1);
});

JSFiddle Example with mouseleave