CODEWITHSUNDEEP
jquery
Adam
Adam

Reputation: 6172

jQuery: fade in 1 element on hover while fading out many others in a smooth fashion

In my page I have severals divs. When the user hovers over 1 div I want to fade out all other elements except the one the user is hovering over. This works with the code below, however: When the user moves fast with his mouse over all items, it appears as if the fading proces for each item is queued and even though the user is no longer moving his mouse, the fading out continues until the queue is empty. To test, check my code below and move your mouse for example from the left to the right and notice the effect.

What I want to achieve is that the current item on which the user hovers has opacity of 1 while the others are then given 0.7. How can I do this?

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

Upvotes: 0

Views: 852

Answers (1)

Michael Peterson
Michael Peterson

Reputation: 1123

You can add .stop() prevent the queue from building: 

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

$('.element').not('.elementhovered').stop()fadeTo(500, 0.7);

Upvotes: 1

Related Questions