jQuery隐藏和显示不正确（多次）

Question

I'm having a problem with my project, on combination with jQuery/Coffeescript.

On my homepage I have a block with text, with an arrow underneath it. Under there, there are buttons, and every time I have my mouse over one of those buttons, I want the text block + arrow to move. I do this with the jQuery UI library, with the method hide and show .

In my CSS code I made several classes: .position1 , .position2 and .position1 . Every time over hover with my mouse over one of the buttons, I want the text block to move to a specific position, so I change it's class (if someone has a better solution, I would gladly like to hear it).

Now the problem I'm having, is that sometimes the arrow hides and appears multiple times after each other (especially when I move my mouse very fast between the buttons)

A simple (partial) version of my jQuery is as follows:

var appear_arrow = function(to_position, show_delay) {
  removeClasses($('.arrow'));
  $('.arrow').addClass(to_class);
  $('.arrow').delay(show_delay).show('slide', 'slow');
};

var to_position1 = function() {
  $('.arrow').hide(0);
  $('.text_block').hide(appear);
  switchClass($('.text_block'));
  $('.text_block').show(appear);
  appear_arrow('position1', delay);
};

$('.button1').hover(
  function() {
    to_position1();
  },
  function() {}
);

My question, does anybody know why sometimes the arrow is appearing multiple times. Or does someone has a suggestion how to better do this?

Answer 1

jQuery queues up all its animations on a given Element rather than resetting it first.

$("selector").stop(); // stops animations on matched elements and resets queue 

A stop().fadeIn('slow') however will start from the opacity the element had when you called stop, which could be solved by for example hiding/showing it immediately, then doing a full fade at the new location - whatever looks best for you.

On a side note:

Seems you wrote wrapper functions for jQuery's removeClass and toggleClass methods. removeClass() if called without arguments removes all classes, so you could possibly just use those if in a jQuery context anyway (assuming your methods have no extra functionality).

Seeing how often you call $('.arrow') you may want to cache your selectors, at least per iteration, then pass it to appear_arrow().

var $arrow = $('.arrow')