执行前停止动画

Question

我根据点击的选项制作了 showing/hiding 内容幻灯片。问题是，当我很快点击多个选项时，动画会重叠，甚至会导致功能崩溃请检查一下：https://jsfiddle.net/zhcoeaej/

这是 jQuery 函数：

$(document).ready(function() {
$("#lista ul li span").click(function(e) {
  var activo = "#" + $(this).attr("class").split(" ")[0];

  if ($(activo).css("display") == "block") {
    return;
}

//Set list as inactive
$("#lista ul li span").each(function(index) {
  var clase = "." + $(this).attr("class");
  $("#lista ul li span").removeClass("activo");
});

//Hide all
$("#contenido > div").each(function(index) {
  var id = "#" + $(this).attr("id");
  $(id).hide("drop", {
    direction: "right"
  }, 600);
}).delay(600);

$(activo).show("drop", {
  direction: "right"
}, 600);
$(activo.replace("#", ".")).addClass("activo");
});
});

编辑：我想我没有很好地解释自己，抱歉。代码工作正常，但是当我依次按选项 1、选项 2 和选项 3 时，内容重叠，有一段时间你可以看到两个内容可见

Answer 1

如果我是你，我会做两个改变。

1) 使用绝对位置，这样如果两个框意外重叠，它会在一个进入而另一个离开时进行，但在页面上的正确位置。

2) 使用 css3 转换。这样你就可以保持代码的整洁和可读性。您从 javascript 中唯一需要做的就是添加和删除类。所以单击操作将是这样的：$("#element-clickable").click(function(){ $(".activo").each(function(){$(this).removeClass("show");}); // And now addClass "show" to the one you want to show. })

这样您就可以确保一次只显示一个。

Answer 2

您应该能够通过使用.finish()来解决这个问题，在再次开始您的动画之前清除动画队列。但是，.hide() 的 jQuery UI 动画似乎出了点问题。和 .show()，当我添加该方法时，它们的动画没有正确完成。

相反，我尝试将 jQueryUI .hide() 和 .show() 替换为非 jQuery-UI .animate() 具有相同的结果。这似乎效果更好，尽管使用 .show() 和 .hide()（不可设置动画）使事情变得有些复杂。

其他CSS：

#contenido > div {
  position: relative;
}

jQuery:

$("#contenido > div").finish().not(activo).animate({
  left: '100%',
  opacity: 0,
}, 600, function() {
  $(this).hide();
});
clearTimeout(window.timer); // global variable
window.timer = setTimeout(function() {
  $(activo).show().animate({
    left: 0,
    opacity: 1
  }, 600);
  $(activo.replace("#", ".")).addClass("activo");
}, 600);

https://jsfiddle.net/mblase75/bzxtdywj/

执行前停止动画

Stop animation before executing

jquery

show

hide