0

在我的页面中，我有几个 div。当用户将鼠标悬停在 1 个 div 上时，我想淡出除用户悬停的元素之外的所有其他元素。但是，这适用于下面的代码：当用户将鼠标快速移动到所有项目上时，看起来好像每个项目的淡入淡出过程都在排队，即使用户不再移动鼠标，淡出也会继续，直到队列是空的。要进行测试，请检查下面的代码并将鼠标从左向右移动并注意效果。

我想要实现的是用户悬停在其上的当前项目的不透明度为 1，而其他项目的不透明度为 0.7。我怎样才能做到这一点？

<!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>
4

1 回答 1

1

您可以添加.stop()阻止队列建立：

curelement.stop().fadeTo(500, 1.0);

$('.element').not('.elementhovered').stop()fadeTo(500, 0.7);
于 2012-08-10T20:12:56.993 回答