Jquery 尝试在悬停时更改不透明度的情况下构建div网格

请容忍我，因为这是我试图从头开始构建的第一个脚本，所以它很糟糕，我知道这一点

我试图创建的是：一个由9个div组成的网格，当鼠标悬停在一个div上时，其他8个div的不透明度将变为.25。然后，只要鼠标停留在网格上，“1”不透明度级别就跟随鼠标。无论鼠标在哪里，你都有1（实际上是.999）不透明度，其他地方你有.25

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

我知道这很复杂，所以我在这里创建了一个JSFIDLE：

如果移动缓慢，它实际上可以工作，但脚本太不可靠：如果移动鼠标更快，可能会得到不可预测的结果，例如一组div为“开（1）”而另一组div为“关（0.25）”

这是我写的剧本：

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

  }

  );
});

我想脚本可以通过使用向量或其他东西变得更好。我希望有人能帮我让这更可靠，谢谢各位。

像这样试试看

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

---

您将遇到错误，因为动画不会立即设置不透明度，但会在500毫秒后淡出。因此，在您的代码中会出现这样的情况：节点.25或1。当鼠标离开网格时，实际问题会出现。其他功能还可以，但有时当鼠标离开网格时，一个或多个div不会返回到1不透明度。如您所见，当鼠标离开网格时，效果是即时的，并且不使用动画。但这就是实际问题的开始，所以我不认为动画是真正的问题。它是有效的，比我的短95%左右！谢谢现在，我将查看文档并了解它的作用：）。在您的示例中，不透明度可以设置为1，而不是.999。没有问题，我使用.999是为了避免一开始出现的问题。