Question

please bear with me because this is the first script I’m trying to build from scratch so it sucks and I’m aware of this.

What I’m trying to create is: a grid of 9 divs, when the mouse hovers on a div the other 8 fade to .25 opacity. Then as long as the mouse stays on the grid the “1” opacity level just follows the mouse. Wherever the mouse is you have 1 (actually .999) opacity, elsewhere you have .25.

When the mouse exits completely from the grid area, all the divs switch back to 1 opacity.

I know it’s quite convoluted so I created a jsfiddle here:
http://jsfiddle.net/Cooperdale/AKuKx/15/

It actually works if you move slowly, but the script is too unreliable: if you move the mouse faster, you can get unpredictable results such as a group of divs being “on (1)” and the other divs “off (0.25)”.

This is the script I wrote:

    $(function() {

    $('#jazzmen').mouseleave(function() {
        $('#sq1').css({ opacity: 1 });
        $('#sq2').css({ opacity: 1 });
        $('#sq3').css({ opacity: 1 });
        $('#sq4').css({ opacity: 1 });
        $('#sq5').css({ opacity: 1 });
        $('#sq6').css({ opacity: 1 });
        $('#sq7').css({ opacity: 1 });
        $('#sq8').css({ opacity: 1 });
        $('#sq9').css({ opacity: 1 });
    }
    );


  $('.music9').hover(function() {
    if ($(this).css('opacity') == 1) {
        $(this).css({ opacity: 0.999 });
        if (this.id !== 'sq1') {
            $('#sq1').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq2') {
            $('#sq2').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq3') {
            $('#sq3').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq4') {
            $('#sq4').animate({opacity: 0.25}, 500);
        }        
        if (this.id !== 'sq5') {
            $('#sq5').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq6') {
            $('#sq6').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq7') {
            $('#sq7').animate({opacity: 0.25}, 500);
        }            
        if (this.id !== 'sq8') {
            $('#sq8').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq9') {
            $('#sq9').animate({opacity: 0.25}, 500);
        }
     }

     if ($(this).css('opacity') == 0.25) {
         $(this).animate({opacity: 0.999}, 200);

        if (this.id !== 'sq1') {
            $('#sq1').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq2') {
            $('#sq2').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq3') {
            $('#sq3').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq4') {
            $('#sq4').animate({opacity: 0.25}, 10);
        }        
        if (this.id !== 'sq5') {
            $('#sq5').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq6') {
            $('#sq6').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq7') {
            $('#sq7').animate({opacity: 0.25}, 10);
        }            
        if (this.id !== 'sq8') {
            $('#sq8').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq9') {
            $('#sq9').animate({opacity: 0.25}, 10);
        }
    }

  }

  );
});

I guess the script could be made much better by using vectors or something. I hope somebody can help me make this more reliable, thanks guys.

Answer 1

Try it like this

$('.music9')
    .on('mouseover', function() {
        $(this).stop().animate({ opacity: 0.999 })
               .siblings().stop().animate({ opacity: 0.25 });
    })
    .on('mouseleave', function() {
        $('.music9').stop().animate({ opacity: 0.999 });
    });

DEMO