Question

我的项目有问题，与jQuery / Coffeescript结合使用。

在我的主页上，我有一个带文字的区块，下面有一个箭头。在那里，有按钮，每当我将鼠标放在其中一个按钮上时，我希望文本块+箭头移动。我使用jQuery UI库执行此操作，方法为hide和show。

在我的CSS代码中，我创建了几个类：.position1，.position2和.position1。每次用鼠标悬停在其中一个按钮上时，我希望文本块移动到特定位置，所以我改变它的类（如果有人有更好的解决方案，我很乐意听到它）。

现在我遇到的问题是，有时箭头隐藏并且相互出现多次（特别是当我在按钮之间快速移动鼠标时）

我的jQuery的简单（部分）版本如下：

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() {}
);

我的问题是，是否有人知道为什么有时候箭头出现多次。或者有人建议如何更好地做到这一点？

Answer 1

jQuery将给定Element上的所有动画排队，而不是先重置它。

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

一个stop（）。fadeIn（'slow'）但是会从你调用stop时元素的不透明度开始，这可以通过例如立即隐藏/显示它来解决，然后在新位置进行完全淡入淡出 - 无论什么看起来最适合你。

旁注：

似乎你为jQuery的removeClass和toggleClass方法编写了包装函数。 removeClass（）如果不带参数调用会删除所有类，所以你可能只是在jQuery上下文中使用它们（假设你的方法没有额外的功能）。

看到你调用$（'。arrow'）的频率，你可能想要缓存你的选择器，至少每次迭代，然后将它传递给appear_arrow（）。

var $arrow = $('.arrow')

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

1 个答案: