请耐心等待,因为这是我尝试从头开始构建的第一个脚本,所以它很糟糕,而且我知道这一点。
我想要创建的是:一个由 9 个 div 组成的网格,当鼠标悬停在一个 div 上时,其他 8 个 div 的不透明度会淡出至 0.25。然后,只要鼠标停留在网格上,“1”不透明度级别就会跟随鼠标。无论鼠标在哪里,您的不透明度都是 1(实际上是 0.999),其他地方的不透明度是 0.25。
当鼠标完全退出网格区域时,所有 div 都会切换回 1 不透明度。
我知道这很复杂,所以我在这里创建了一个 jsfiddle: http://jsfiddle.net/Cooperdale/AKuKx/15/
如果你移动缓慢,它确实可以工作,但脚本太不可靠:如果你移动鼠标更快,你可能会得到不可预测的结果,例如一组 div 为“on (1)”,而其他 div 为“off ( 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 });
});
关于jquery - 尝试构建一个 div 网格,悬停时不透明度会发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13547118/