CODEWITHSUNDEEP
javascriptjquery
Vuk Stanković
Vuk Stanković

Reputation: 7964

Multiple events detected where should only be one

I have an indicator element that should disappear when I hover it, and replacement should appear on same place.

Now when I leave this replacement, it should now disappear, and old indicator should take it's place again.

Here is a HTML for indicators or triggers:

<div class="help-trigger for-desktop">
    <div class="bg">
        <h4>HELP ME<i class="icon-double-angle-right"></i><i class="icon-double-angle-left"></i></h4>
    </div>
</div>
<div class="help-trigger for-mobile">
    <div class="bg">
    </div>
</div>

And here is jQuery code: 

jQuery('.help-trigger.for-mobile').hover(function(){
    jQuery(this).stop( true, true ).hide();
    jQuery('.help-trigger.for-desktop').stop( true, true).show();
    jQuery('.help-trigger.for-desktop').mouseout(function(){
        jQuery(this).stop( true, true ).hide();
        jQuery('.help-trigger.for-mobile').stop( true, true ).show();
    });
});

This in general works, but it sort of flickers and it's unstable. Events get detected more than they should (in lack of better words) so I get too many changes even though I haven't left .for-desktop element

Upvotes: 0

Views: 40

Answers (2)

Mat
Mat

Reputation: 445

Hey i think you trying to achive something like that :

$('.help-trigger.for-mobile').hover(function() {
        $(this).hide();     
    }, function() {
        $(this).show();
    });

You put a .mouseout inside the mouseover, can't work that way : https://api.jquery.com/hover/

Upvotes: 0

devnull69
devnull69

Reputation: 16544

You are adding a .mouseout() event handler each time(!) you hover your move over your .help-trigger.for-mobile elements. So on each mouseout you call several handlers ... is that your purpose?

EDIT: Additionally, using .hover() with only one callback will add a handler for both mouseenter and mouseleave, so you add additional handlers for .mouseout on each mouseenter and mouseleave

Upvotes: 2

Related Questions