JavaScript JQuery 设置超时

Question

我是 JavaScript 和 JQuery 的初学者，我正在尝试练习一些东西

var activetab = 0;

$("li").click(function () {
  $("#tabs-"+activetab).hide("slide", { direction: "left" }, 1000);
   $("li").eq(activetab).css('background-color','white');
  var index = $("li").index(this);
  $("span").text(index);
  $("li").eq(index).css('background-color','red');
    $("#tabs-"+index).show("slide", { direction: "left" }, 1000); 
  activetab = index;
});

这是我的 fiddle :

http://jsfiddle.net/6WC4J/

问题是我希望 show 方法在一段时间后启动，这样当前一个元素被隐藏时，新的元素就会显示出来， 尝试使用 setTimeout 但没有成功，有什么想法吗？

总体感谢

Answer 1

您可以使用 .hide() 的 complete 回调触发 .show() 动画的方法。

$("#tabs-" + activetab).hide("slide", {
    direction: "left"
}, 1000, function(){
    $("#tabs-" + index).show("slide", {
        direction: "left"
    }, 1000);
    activetab = index;
});

这样您就不需要使用 setTimeout 并且同步是无缝的。

See it here.