Mouseover keeps triggering jQuery

Question

I have 2 divs, one div(div2) functions as an overlay that has to be triggered when mouseover on the first div(div1). But when i move my mouse around while still in div(1) the other div(div2) keeps triggering. I tried to add a stop before my animate function but it does not seem to work. Is there another way to stop my div(div2) from triggering? Heres my jQuery code:

jQuery('.Mainbutton_hoverwrapper').promise().done(function(){
    jQuery('.Mainbutton_hoverwrapper').mouseover(function() {
        console.log(jQuery(this).find( '.fusion-button-wrapper' ).width());
         jQuery(this).find( '.fusion-button-wrapper' ).css('left', '-' + jQuery(this).width()*2 + 'px');
         jQuery(this).find( '.Mainbutton_hover' ).css('display', 'block');
        jQuery(this).find( '.fusion-button-wrapper' ).stop( true, true ).animate({left:'0px'});
      })
      .mouseout(function() {
        jQuery(this).find( '.Mainbutton_hover' ).css('display', 'none');
        jQuery(this).find( '.fusion-button-wrapper' ).stop( true, true ).animate({left: '-' + jQuery(this).width()*2 + 'px'});
      });
});

The animate on itself works fine when executed one time.

EDIT: I tried mouseenter but when i move my mouse the div2 goes away again. Weird behaviour.

EDITED CODE:

jQuery('.Mainbutton_hoverwrapper').mouseenter(function() {
        console.log(jQuery(this).find( '.fusion-button-wrapper' ).width());
         jQuery(this).find( '.fusion-button-wrapper' ).css('left', '-' + jQuery(this).width()*2 + 'px');
         jQuery(this).find( '.Mainbutton_hover' ).css('display', 'block');
        jQuery(this).find( '.fusion-button-wrapper' ).stop( true, true ).animate({left:'0px'});
      })
      .mouseout(function() {
        jQuery(this).find( '.Mainbutton_hover' ).css('display', 'none');
        jQuery(this).find( '.fusion-button-wrapper' ).stop( true, true ).animate({left: '-' + jQuery(this).width()*2 + 'px'});
      });

You have to provide minimalistic sample replicating your issue... — A. Wolff, Feb 18 '16 at 12:36
Could i give you a link to the website im developping it on, i don't know if it's possible to jsfiddle it. @A.Wolff — Arne Banck, Feb 18 '16 at 12:37
No sorry, i don't do third party website debugging which wouldn't bring anything constructive to the community. If you have an issue with your code, you have to provide MCVE — A. Wolff, Feb 18 '16 at 12:39
Here I created a JSFiddle https://jsfiddle.net/rpxb6ca7/ :) @A.Wolff — Arne Banck, Feb 18 '16 at 12:55
Is it what you are looking for, using `mouseenter` **&&** `mouseleave` (as suggested in first comment here!) https://jsfiddle.net/rpxb6ca7/1/ That's said, you would have better to use a CSS only solution — A. Wolff, Feb 18 '16 at 13:00
Ok thanks for the solution, forgot to replace the mouseleave. I couldn't use a css solution since i never have fixed width or fixed height's. @A.Wolff — Arne Banck, Feb 18 '16 at 13:04
I was talking about the animation part https://jsfiddle.net/rpxb6ca7/3/ — A. Wolff, Feb 18 '16 at 13:26

Mouseover keeps triggering jQuery

0 Answers0