Question

请耐心等待我，因为这是我尝试从头开始构建的第一个脚本，所以很糟糕，我很清楚这一点。

我想要创建的是：一个9格的网格，当鼠标悬停在div上时，另外8个淡入到.25不透明度。然后只要鼠标停留在网格上，＆＃34; 1＆＃34;不透明度等级跟随鼠标。无论鼠标在哪里，你都有1（实际上是.999）不透明度，在其他地方你有.25。

当鼠标从网格区域完全退出时，所有div都会切换回1不透明度。

我知道它很复杂所以我在这里创建了一个jsfiddle： http://jsfiddle.net/Cooperdale/AKuKx/15/

如果你移动缓慢，它实际上是有效的，但脚本太不可靠了：如果你移动鼠标的速度更快，你可能会得到不可预测的结果，例如一组div在＆＃34; on（1）＆＃34;和其他divs＆＃34; off（0.25）＆＃34;。

这是我写的剧本：

    $(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);
        }
    }

  }

  );
});

我想通过使用向量或其他东西可以使脚本更好。我希望有人可以帮助我让这个更可靠，谢谢你们。

Answer 1

尝试这样

$('.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

试图在悬停时构建一个不透明度变化的div网格

1 个答案: