How to stop diagonalFade if I move the mouse very quickly?
I have the following code but if I move the mouse really quickly, the images still fade in&out constantly.
stop()
works if I use animate()
but when I use this plugin it doesn't.
$('.person a').live('mouseenter', function() {
$($(this).children('.overstate')).stop().diagonalFade({
time: 350,
fadeDirection_x: 'left-right',
fadeDirection_y: 'top-bottom',
fade: 'out'
});
}).live('mouseleave', function() {
$($(this).children('.overstate')).stop().diagonalFade({
time: 350,
fadeDirection_x: 'left-right',
fadeDirection_y: 'top-bottom',
fade: 'in'
});
});
html
<div class="person">
<a href="#">
<img src="images/p1h.jpg" />
<span class="name">Lee</span>
<span class="overstate">
<img src="images/p1.jpg" />
</span>
</a>
</div><!--end person-->
css
.person { float:left; width:180px; margin-bottom:40px; height:236px; margin-right:31px; }
.lastperson { margin-right:0; }
.person a { display:block; width:180px; height:236px; overflow:hidden; position:relative; }
.person img { position:relative; z-index:2000; }
.name { display:block; width:170px; height:34px; background:url(../images/team-name.png) no-repeat top left; font-size:18px; color:#FFF; text-align:left; line-height:33px; padding-left:10px; float:left; position:relative; z-index:5000;}
.overstate { le开发者_运维问答ft:0; top:0; position:absolute; z-index:3000; }
I thought that something like that might work but keeps flashing if I move the mouse over a couple of times
$('.person a').live('mouseenter', function() {
if (!$(this).children('.overstate').hasClass('animated')) {
$($(this).children('.overstate')).stop().diagonalFade({
time: 450,
fadeDirection_x: 'left-right',
fadeDirection_y: 'top-bottom',
fade: 'out'
});
}
}).live('mouseleave', function() {
$($(this).children('.overstate')).addClass('animated').stop().diagonalFade({
time: 450,
fadeDirection_x: 'left-right',
fadeDirection_y: 'top-bottom',
fade: 'in',
complete: function() { $('.person a').children('.overstate').removeClass('animated'); }
});
});
i'm afraid that the single solution cand be something like this:
<script>
var inactive = 1;
$(document).ready(function(){
$('.person a').live('mouseenter', function(e) {
if(inactive==1){
inactive = 0;
$($(this).children('.overstate')).stop().diagonalFade({
time: 350,
fadeDirection_x: 'left-right',
fadeDirection_y: 'top-bottom',
fade: 'out',
complete:function(){
inactive=1;
}
});
}
})
$('.person a').live('mouseleave', function() {
inactive = 0;
$($(this).children('.overstate')).stop().diagonalFade({
time: 350,
fadeDirection_x: 'left-right',
fadeDirection_y: 'top-bottom',
fade: 'in',
complete: function(){
inactive=1;
}
});
});
})
</script>
jQuery tip: $($(this).children('.overstate')).stop()
is redundant. You can just call $(this).children('.overstate').stop()
.
精彩评论