Bug Tracker

Modify

Ticket #8830 (closed bug: duplicate)

Opened 2 years ago

Last modified 15 months ago

Event hover() when fast pointing to an element

Reported by: monolithed@… Owned by:
Priority: high Milestone: 1.next
Component: effects Version: 1.5.2
Keywords: Cc:
Blocking: Blocked by:

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/

Change History

comment:1 Changed 2 years ago by timmywil

  • Priority changed from undecided to high
  • Resolution set to duplicate
  • Status changed from new to closed
  • Component changed from unfiled to effects

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.

comment:2 Changed 2 years ago by timmywil

Duplicate of #8685.

comment:3 follow-up: ↓ 4 Changed 2 years ago by timmywil

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)

Last edited 2 years ago by timmywil (previous) (diff)

comment:4 in reply to: ↑ 3 Changed 2 years ago by monolithed@…

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?

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.