1

特定のクラス (薄暗い) の単語が 2 列、合計 20 列あり、それぞれに一意の ID があるページがあります。「dim」クラスは、単語を非表示として定義します。ボタンを押すと、次の jQuery コードが実行されます。

$().ready(function() 
  {
  var x = 20; // will be dynamic later :-)
    $("#btn1").click(function() 
      {
        for(i=1 ; i <= x ; i++)
          {
          //alert(i);
          $(".dim").removeClass("hilite"); 
            // this 'turns off' all the words
          $("#wrd-"+i).addClass("hilite"); 
            // this turns on the i'th word
          }
      });
  });

アラート行のコメントを外すと、各単語が表示されてから再び非表示になることがわかります。唯一の問題は、それが速すぎることです。各ループを特定のナノ秒数待機させる方法が必要です。setTimeout メソッドを試しましたが、何も実行できません。これを遅くする方法はありますか？.show と .hide を使用してみましたが、すべての効果が一度に発生するようです。

私の目標は、列 1 の最初の単語を 2 秒間表示することです。その後、それは消え、列 2 の単語 1 が 2 秒間表示されます。次に、単語 2 列 1、単語 2 列 2 などです。

ありがとう

4

1 に答える 1

1

#wrd3要素のリストをたどるのにID は必要ありません。

DOM の選択は調整していませんが、このコードはセット内の各アイテムを一時停止して表示および非表示にします。の間隔は、関数が開始する .fadeIn前にアイテムが表示されることを意味します。.fadeOut()

var things = $('.foo');
var index = 0;
things.hide();
var showHide = function() {
  things.eq(index).fadeIn(2000,function(){
    $(this).fadeOut(2000);
  });
  index++;
  setTimeout(showHide,3000);
};

showHide();

もちろん、フェードを.show()や.hide()、またはその他の必要なアニメーションに変更できます。

于 2009-10-27T17:29:25.613 に答える