最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery: On click, prevent mouseenter event - Stack Overflow

programmeradmin6浏览0评论

I have two seperate animations that are occurring, one fires on mouseenter the other on click. The problem is that when they are both activated it creates a jumpy animation.

You can see what I mean here: JSFiddle

Is it possible to prevent the mouseenter event from occurring if the click event is activated?

Javascript

$('header h1').mouseenter(function() {
  $('header:not(.open)').delay(500).animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function plete
  });
});

$('header h1').mouseleave(function() {
  $('header:not(.open)').animate({
    'padding-bottom': '20px'
  }, 150, function() {
    //function plete
  });
});

$('header h1').click(function() {

  if ($('header').hasClass('open')) {
    $('header p').fadeOut(100);
    $('header').removeClass('open').animate({
      'padding-bottom': '20px'
    }, 300, function() {
      //animation plete
    });
  }

  else {
    $('header').addClass('open').animate({
      'padding-bottom': '150px'
    }, 300, function() {
      $('header p').fadeIn();
    });
  }

});​

I have two seperate animations that are occurring, one fires on mouseenter the other on click. The problem is that when they are both activated it creates a jumpy animation.

You can see what I mean here: JSFiddle

Is it possible to prevent the mouseenter event from occurring if the click event is activated?

Javascript

$('header h1').mouseenter(function() {
  $('header:not(.open)').delay(500).animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function plete
  });
});

$('header h1').mouseleave(function() {
  $('header:not(.open)').animate({
    'padding-bottom': '20px'
  }, 150, function() {
    //function plete
  });
});

$('header h1').click(function() {

  if ($('header').hasClass('open')) {
    $('header p').fadeOut(100);
    $('header').removeClass('open').animate({
      'padding-bottom': '20px'
    }, 300, function() {
      //animation plete
    });
  }

  else {
    $('header').addClass('open').animate({
      'padding-bottom': '150px'
    }, 300, function() {
      $('header p').fadeIn();
    });
  }

});​
Share Improve this question asked May 28, 2012 at 18:06 colindunncolindunn 3,16311 gold badges50 silver badges73 bronze badges 4
  • Why do you need to delay for half a second? – mayhewr Commented May 28, 2012 at 18:12
  • @mayhewr I added the delay to emphasize the problem. But it still exists regardless. – colindunn Commented May 28, 2012 at 18:12
  • Looks like unbind might work? api.jquery./unbind – colindunn Commented May 28, 2012 at 18:18
  • Did the answer you chose fix the problem? – Dan Commented Jun 17, 2012 at 22:11
Add a ment  | 

4 Answers 4

Reset to default 4

Seems easier to just do this :

$('header').on({
    mouseenter: function(e) {
        if (!$(this).is('.open')) {
            $(this).stop(true, true).delay(500).animate({'padding-bottom': '40px' }, 150, function() {
                //function plete
            });
        }
    },
    mouseleave: function(e) {
        if (!$(this).is('.open')) {
            $(this).stop(true, true).animate({'padding-bottom': '20px'}, 150, function() {
            //function plete
            });
        }
    },
    click: function() {
        if ($(this).is('.open')) {
            $(this).find('p').fadeOut(100).end().removeClass('open').stop(true, true).animate({'padding-bottom': '20px'}, 300, function() {
                //animation plete
            });
        }else{
            $(this).addClass('open').stop(true, true).animate({'padding-bottom': '150px'}, 300, function() {
                $('p', this).fadeIn();
            });
        }
    }
});​

No, you can't. Especially because those events are based on each other: To click on an element, you need to enter it with the mouse: You can't deactivate the enter event which already happened when you click. And you obviously shouldn't deactivate future click events when entering.

The solution to your problem with the jumping animations should be the stop() method, which ends running animations on the selected elements.

How about checking for the open class after the delay.

Changing from

$('header h1').mouseenter(function() {
  $('header:not(.open)').delay(500).animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function plete
  });
});

to

$('header h1').mouseenter(function() {
  $.delay(500);
  $('header:not(.open)').animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function plete
  });
});

Obviously you can fine-tune the delay to your liking, but the idea would be something like:

If they don't click before x milliseconds, increase padding.

Sounds like you need .stop().

Add this to the beginning of your click event:

$('header').stop(true)

The first parameter for true is clearQueue, which will clear your animation queue.

See this jsFiddle.

发布评论

评论列表(0)

  1. 暂无评论