jQuery：悬停时淡入1个元素，同时以平滑方式淡出许多其他元素
在我的页面中，我有几个div。当用户悬停在1个div上时，我想淡出除用户悬停的元素之外的所有其他元素。 但是，这适用于以下代码： 当用户在所有项目上快速移动鼠标时，似乎每个项目的淡出过程都已排队，即使用户不再移动鼠标，淡出仍将继续，直到队列为空。 要进行测试，请检查下面的代码，例如从左向右移动鼠标，并注意效果 我想要实现的是，用户悬停的当前项的不透明度为1，而其他项的不透明度则为0.7。 我该怎么做jQuery：悬停时淡入1个元素，同时以平滑方式淡出许多其他元素,jquery,Jquery,在我的页面中，我有几个div。当用户悬停在1个div上时，我想淡出除用户悬停的元素之外的所有其他元素。 但是，这适用于以下代码： 当用户在所有项目上快速移动鼠标时，似乎每个项目的淡出过程都已排队，即使用户不再移动鼠标，淡出仍将继续，直到队列为空。 要进行测试，请检查下面的代码，例如从左向右移动鼠标，并注意效果 我想要实现的是，用户悬停的当前项的不透明度为1，而其他项的不透明度则为0.7。 我该怎么做 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/script/jquery-1.4.2.min.js"></script>
<style>
body{background-color:Red;}
.elementhighlight
{
font-weight:bold !important;
color:#FFF !important;
}
.elementhovered{background-color:#AE2460 !important;}
.element
{
width:140px;
height:130px;
padding-left:4px;
padding-right:4px;
float:left;
cursor:pointer;
}
.element0{background-color:#FFF;}
.element1{background-color:#E6E4E0;}
.element .title,.element1 .title{
font: 12px Helvetica, verdana !important;
text-align:center;
padding-top:4px;
padding-bottom:4px;
color:#666666;
}
</style>
</head>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('.element').hover(function () {
var curelement = $(this);
curelement.fadeTo(500, 1.0);
curelement.addClass('elementhovered');
curelement.stop().fadeTo(500, 1.0);
$('.element').not('.elementhovered').stop().fadeTo(500, 0.7);
curelement.find('.title').addClass('elementhighlight');
},
function () {
$('.element').fadeTo(300, 1.0);
var curelement = $(this);
curelement.removeClass('elementhovered');
curelement.find('.title').removeClass('elementhighlight');
});
});
</script>
<body>
<div class="element element0">
<div class="title">Item</div>
</div>
<div class="element element1">
<div class="title">Item</div>
</div>
<div class="element element0">
<div class="title">Item</div>
</div>
<div class="element element1">
<div class="title">Item</div>
</div>
<div class="element element0">
<div class="title">Item</div>
</div>
<div class="element element1">
<div class="title">Item</div>
</div>
</body>
</html>
正文{背景色：红色；}
.elementhighlight
{
字体大小：粗体！重要；
颜色：#FFF！重要；
}
.element悬停{背景色：#AE2460！重要；}
.元素
{
宽度：140px；
高度：130像素；
左侧填充：4px；
右侧填充：4px；
浮动：左；
光标：指针；
}
.element0{背景色：#FFF；}
.element1{背景色：#E6E4E0；}
.element.title、.element1.title{
字体：12px Helvetica，verdana！重要；
文本对齐：居中；
垫面：4px；
垫底：4px；
颜色：#666666；
}
$（文档）.ready（函数（）{
$（'.element'）。悬停（函数（）{
var curelement=$（此值）；
curelement.fadeTo（500,1.0）；
curelement.addClass（'elementhovered'）；
curelement.stop（）.fadeTo（500，1.0）；
$（'.element'）.not（'.elementhovered'）.stop（）.fadeTo（500,0.7）；
curelement.find（'.title'）.addClass（'elementhighlight'）；
},
函数（）{
$（'.element'）.fadeTo（300,1.0）；
var curelement=$（此值）；
removeClass（'elementhovered'）；
curelement.find（'.title'）.removeClass（'elementhighlight'）；
});
});
项目
项目
项目
项目
项目
项目
.stop（）curelement.stop().fadeTo(500, 1.0);
$('.element').not('.elementhovered').stop()fadeTo(500, 0.7);
或者，您可以使用.stop（false，true），具体取决于您所追求的效果。或者，如果你想“防止意外触发动画”，你可以使用hoverIntent插件，我更新了我的代码，但没有去。我不知道如何使用stop（）方法。我想要的效果是：用户将鼠标悬停在项目1上，除项目1之外的所有其他项目都会淡出。用户将鼠标移动到项目2，除项目2之外的所有其他项目将淡出。等。现在，当用户在各种项目上快速移动时，效果开始。但是，我只想让效果与用户当前悬停的元素相关。这意味着当用户从项目1移动到项目10时，从1开始，项目1上的效果被触发，所有其他项目都变暗。但是当用户移动到下一个项目时，这个过程应该停止。请看这里我想要实现的功能：将
.stop（）fadeTo（）.stop（）.stop（false，true）