CODEWITHSUNDEEP
jquerycssfadeinfadeout
GluePear
GluePear

Reputation: 7735

Incomplete fade in and out on elements

I have six divs, boxes with content in them, some of which has to fade out on hover, some of it to fade in. I.e. each box has an image (which fades out on hover, and fades back in after hover) and some text (which fades in on hover, and fades back out after hover).

I'm using jQuery to do the fades. It all works find, apart from when the mouse moves quickly from one div to another -- in this case the first div is sometimes arrested in its fade, so that the faded elements are stuck at (e.g.) 50% opacity.

HTML (x 6):

<div class="box">
<img class="icon" src="assets/images/icon.png" />
<p class="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS:

.box {
    width:300px;
    height:200px;
    float:left;
    margin:0 10px 10px 0;
    position:relative;
    cursor:pointer;
}

.box p.more {
    font-size:15px;top:80px;opacity:0;
}

.box img.icon {
    position:absolute;top:30px;right:40px;
}

jQuery:

$('.box').hover(function(){     
    $('p.more',this).stop(true).animate({top:'30px',opacity:'1'},'slow');
    $('img.icon',this).stop(true).fadeOut(300);     
},function() {      
    $('p.more',this).stop(true).animate({top:'80px',opacity:'0'},'slow');
    $('img.icon',this).stop(true).fadeIn(300);          
});

Any ideas gratefully received!

Upvotes: 0

Views: 175

Answers (2)

bugknightyyp
bugknightyyp

Reputation: 61

$('.box').hover(function(){     
    $('p.more',this).stop(true, true).animate({top:'30px',opacity:'1'},'slow');
    $('img.icon',this).stop(true, true).fadeTo(300,0);     
},function() {      
    $('p.more',this).stop(true, true).animate({top:'80px',opacity:'0'},'slow');
    $('img.icon',this).stop(true, true).fadeTo(300,1);          
});

please reference the offical document about 'stop' function

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

Try to use .fadeTo() instead of .fadeIn() and .fadeOut(),

$('.box').hover(function(){     
    $('p.more',this).stop(true).animate({top:'30px',opacity:'1'},'slow');
    $('img.icon',this).stop(true).fadeTo(300,0);     
},function() {      
    $('p.more',this).stop(true).animate({top:'80px',opacity:'0'},'slow');
    $('img.icon',this).stop(true).fadeTo(300,1);          
});

Upvotes: 0

Related Questions