0

私のページにはいくつかのdivがあります。ユーザーが1divにカーソルを合わせると、ユーザーがカーソルを合わせている要素を除く他のすべての要素をフェードアウトします。ただし、これは以下のコードで機能します。ユーザーがすべてのアイテム上でマウスを使って高速で移動すると、各アイテムのフェードプロセスがキューに入れられているように見え、ユーザーがマウスを動かしなくなっても、フェードアウトは次のように続きます。キューは空です。テストするには、以下のコードを確認し、たとえばマウスを左から右に動かして、効果を確認してください。

私が達成したいのは、ユーザーがホバーしている現在のアイテムの不透明度が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 に答える