Question

我根据点击的选项显示/隐藏内容制作了幻灯片。问题是，当我非常快速地点击多个选项时，动画会自动重叠，甚至会使功能崩溃请检查一下：https://jsfiddle.net/zhcoeaej/

这是jQuery函数：

choose()

编辑：我想我没有解释好自己，对不起。代码工作正常，但当我按选项1然后选项2然后选项3，一个接一个，内容重叠，有一个时刻，你可以看到两个内容可见

Answer 1

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

1）使用绝对位置，这样如果两个盒子会重叠地重叠，那么当一个人进入而另一个人正在退出时会这样做，但是在页面上的正确位置。

2）使用css3过渡。这样你就可以保持代码的清洁和可读性。你唯一要做的就是添加和删除类。所以点击操作就像这样：$("#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/

执行前停止动画

2 个答案: