javascript - jQuery - Mouseleave not firing when moving mouse quickly - Stack Overflow

admin管理员组

文章数量:1405307

There are a few answers to similar questions, but none that are working for me while still giving me the desired effect, or none that I understand. So any help or guidance would be great

Here's a fiddle: /

Essentially what happens is when you hover over the cells quickly, the mouseleave function doesn't run and I'm left with the active state.

I've "half fixed" this, but it's still not as I would like it to be.

Adding this to mouseenter fixes the problem on the next hover:

$('.cell .hover').fadeOut();
$('.cell span').animate({ "marginTop" : "500px" });

(Not really a fix)

Any help would be great!

There are a few answers to similar questions, but none that are working for me while still giving me the desired effect, or none that I understand. So any help or guidance would be great

Here's a fiddle: http://jsfiddle/csoh1vzb/

Essentially what happens is when you hover over the cells quickly, the mouseleave function doesn't run and I'm left with the active state.

I've "half fixed" this, but it's still not as I would like it to be.

Adding this to mouseenter fixes the problem on the next hover:

$('.cell .hover').fadeOut();
$('.cell span').animate({ "marginTop" : "500px" });

(Not really a fix)

Any help would be great!

• javascript
• jquery

Share Improve this question Follow asked Jun 30, 2015 at 8:05 NickNick 2,55955 gold badges3939 silver badges7272 bronze badges 1

• I think doing everything in javascript is too heavy, you should only keep your margin-top animation in javascript, and try to create your fading animation in css, and the generation of your .hover in the html itself. I'm going to try and make a fiddle out of it – user4467065 Commented Jun 30, 2015 at 8:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The problem is not the not fired mouseleave, the problem you are facing is that the animation takes 400ms (the default animation duration) to plete, which means that the animation is overriding the mouseleave css change directly after it has been applied when you leave the field within say 300ms

To avoid this, you need to stop the animation.

$('.cell span').stop();
$('.cell .hover').fadeOut();

Should do the trick.

As a Sidenote, if you're doing animations with javascript, better change to velocity.js which is far faster than jQuery's animate.

Whenever possible, it is always better to avoid the use of javascript and prefer using css rules.

You can easily replace your html generation and your fade animation using basic html and css, as you can see on this jsfiddle

Writing fully your html :

<a href="" class="cell cell-01" title="ONE">
    <div class="hover"><span>ONE</span></div>
</a>
<a href="" class="cell cell-02" title="TWO">
    <div class="hover"><span>TWO</span></div>
</a>

And defining most of the rules in your css :

.cell {width: 200px; height: 200px; background: #f00; float: left; display: block; overflow: hidden;}

.cell:hover .hover {
        display:inline-block;
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
}

.hover {
    display:inline-block;
    width: 200px; 
    height: 200px; 
    background: #000; 
    text-align: center;
    opacity: 0;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
}

.hover span {display: inline-block; padding: 10px 20px; font: bold 12px arial; font-style: italic; text-transform: uppercase; background: #222; border: 2px solid #fff; color: #fff;}

And you can easily reduce the size of your javascript, making the entire thing more stable and fast.

(function ($) {
    $('.cell').on('mouseenter', function (){
        var $this = $(this);
        $(this).find('span').stop(true, false).animate({ "marginTop" : ($(this).innerHeight() / 2 - 19) + "px" });
    }).on('mouseleave', function (){
        var $this = $(this);        
        $(this).find('span').animate({ "marginTop" : "500px" });
    });
}(jQuery));

Personally the first answer above is probably simpler and thus a better answer. But I like this because the code seems a bit cleaner overall. HTML:

<div class="cell"> <a href="" class="hover" title="ONE"><span>ONE</span></a>

</div>
<div class="cell"> <a href="" class="hover" title="TWO"><span>TWO</span></a>

</div>

CSS:

.cell {
    width: 200px;
    height: 200px;
    background: #f00;
    float: left;
    display: block;
    overflow: hidden;
    position:relative;
}
.hover {
    width: 200px;
    height: 200px;
    background: #000;
    text-align: center;
    position: absolute;
    top:-200px;
}
.hover span {
    display: inline-block;
    padding: 10px 20px;
    font: bold 12px arial;
    font-style: italic;
    text-transform: uppercase;
    background: #222;
    border: 2px solid #fff;
    color: #fff;
}

JavaScript:

(function ($) {
    $('.cell').on('mouseenter', function () {
        $(this).find('span').stop().animate({
            "marginTop": ($(this).innerHeight() / 2 - 19) + "px"
        });
        $(this).find('.hover').stop().animate({
            "top": 0
        });
    }).on('mouseleave', function () {
        var $this = $(this);

        $(this).find('.hover').stop().animate({
            "top": "-200px"
        });
        $(this).find('span').animate({
            "marginTop": "0px"
        });
    });
}(jQuery));

本文标签： javascriptjQueryMouseleave not firing when moving mouse quicklyStack Overflow