Skip to main content

Bug Tracker

Side navigation

#8830 closed bug (duplicate)

Opened April 09, 2011 09:47AM UTC

Closed April 09, 2011 06:15PM UTC

Last modified March 09, 2012 12:45PM UTC

Event hover() when fast pointing to an element

Reported by: monolithed@gmail.com Owned by:
Priority: high Milestone: 1.next
Component: effects Version: 1.5.2
Keywords: Cc:
Blocked by: Blocking:
Description
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('div').hover(function() {
        $('p').animate({
            height: 'toggle',
            opacity: "toggle"
        }, {
            queue: false,
            duration: 500
        });
    });
});
</script>
<style type="text/css">
p {
    background: red;
    width: 100px;
    height: 100px;
}
</style>

<div>text</div>
<p style="display: none;"></p>


And this bug (can't stop event when fast pointing to an element):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('div').hover(function(event) {
        $('p')[event.type == 'mouseenter' ? 'show' : 'hide'](100);
    });
});
</script>
<style type="text/css">
p {
    background: red;
    width: 100px;
    height: 100px;
}
</style>

<div>text</div>
<p style="display: none;"></p>

please see it here: http://jsfiddle.net/uw8yU/2/ and http://jsfiddle.net/uw8yU/1/

Attachments (0)
Change History (4)

Changed April 09, 2011 06:15PM UTC by timmywil comment:1

component: unfiledeffects
priority: undecidedhigh
resolution: → duplicate
status: newclosed

This may not be ideal, but you can use .stop to withhold the toggle values if you hover again before completion. http://jsfiddle.net/timmywil/uw8yU/3/ jQuery does not save state for animations, but we're looking into changing that. See duplicate ticket.

Changed April 09, 2011 06:15PM UTC by timmywil comment:2

Duplicate of #8685.

Changed April 09, 2011 09:51PM UTC by timmywil comment:3

_comment0: I may have misread your ticket and leaped too quickly to relate it to #8685. You 'do' need to handle debouncing your hovers. \ \ The hover events (mouseenter and mouseleave) are fired whenever the user hovers the element, however quickly. You probably need to make sure the user wants to hover. hoverIntent (http://bit.ly/QJz5) and $.event.special.hover (http://bit.ly/1VBJW) will automatically normalize the hover event, or you can debounce manually using throttle/debounce (http://bit.ly/e8d9TB). Animating? How .stop() works (http://bit.ly/5kq9xo)1302385933523146

I may have misread your ticket and leaped too quickly to relate it to #8685. You ''do'' need to handle debouncing your hovers.

The hover events (mouseenter and mouseleave) are fired whenever the user hovers the element, however quickly. You probably need to make sure the user wants to hover. hoverIntent (http://bit.ly/QJz5) and $.event.special.hover (http://bit.ly/1VBJW) will automatically normalize the hover event, or you can debounce manually using throttle/debounce (http://bit.ly/e8d9TB). Animating? How .stop() works (http://bit.ly/5kq9xo)

Changed April 10, 2011 05:05PM UTC by monolithed@gmail.com comment:4

timmywil, thx for your reply.

I did't know about this way with ''stop(1,1).animate()''. And I think you'd add the one to docs in examples.

But why this http://jsfiddle.net/uw8yU/4/ way with ''stop()'' doesn't work?