0

私は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;
});

これが私のフィドルです：

http://jsfiddle.net/6WC4J/

問題は、前の要素が非表示になると新しい要素が表示されるように、しばらくしてからshowメソッドを起動したいのですが、setTimeoutを使用してみましたが、機能しませんでした。

全体的にありがとう

4

2 に答える 2

1

コールバックを使用する必要があります。

 $("#tabs-" + activetab).hide("slide", {
    direction: "left"
 }, 1000, function(){
     // this will be called after the element is completely hidden.
 });

参照：http ：//api.jquery.com/hide/

于 2013-02-23T11:07:41.583 に答える
1

メソッドのcompleteコールバックを利用して、アニメーションを起動できます。.hide().show()

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

このように、を使用する必要はなくsetTimeout、同期はシームレスです。

こちらをご覧ください。

于 2013-02-23T11:08:32.767 に答える