Jquery 在执行之前停止动画_Jquery_Hide_Show

Jquery 在执行之前停止动画

jquery

Jquery 在执行之前停止动画,jquery,hide,show,Jquery,Hide,Show,我制作了一张幻灯片，根据单击的选项显示/隐藏内容。问题是，当我快速单击多个选项时，动画会重叠，甚至会破坏功能请查看以下内容：这是jQuery函数： $(document).ready(function() { $("#lista ul li span").click(function(e) { var activo = "#" + $(this).attr("class").split(" ")[0]; if ($(activo).css("display") == "block"

我制作了一张幻灯片，根据单击的选项显示/隐藏内容。问题是，当我快速单击多个选项时，动画会重叠，甚至会破坏功能请查看以下内容：

这是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时，内容会重叠，有时你会看到两个可见内容。如果我是你，我会做两个更改

1）使用绝对位置，这样，如果两个框偶然重叠，它将在一个框进入，另一个框退出时重叠，但在页面上的正确位置

2）使用css3转换。这样可以保持代码的干净性和可读性。从javascript中，您唯一要做的就是添加和删除类。因此，单击操作如下：

$（“#元素可单击”）。单击（函数（）{
$（“.activo”）.each（function（）{$（this）.removeClass（“show”）；}）；//现在将类“show”添加到要显示的类中。
})

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

如果我是您，我将进行两个更改

1）使用绝对位置，这样，如果两个框偶然重叠，它将在一个框进入，另一个框退出时重叠，但在页面上的正确位置

2）使用css3转换。这样可以保持代码的干净性和可读性。从javascript中，您唯一要做的就是添加和删除类。因此，单击操作如下：

$（“#元素可单击”）。单击（函数（）{
$（“.activo”）.each（function（）{$（this）.removeClass（“show”）；}）；//现在将类“show”添加到要显示的类中。
})

通过这种方式，您可以确保一次只显示一个。

在再次启动动画之前，您应该能够通过使用清除动画队列来解决此问题。但是，

.hide（）

的jQuery UI动画似乎出了问题。和

.show（）

，当我添加该方法时，它们的动画没有正确完成

相反，我尝试用具有相同结果的非jQueryUI

.animate（）

替换jQueryUI

.hide（）

和

.show（）

。虽然使用

.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);