1

画像のグリッドがページに表示されます。これらの画像のいずれかにカーソルを合わせると、カードがめくられるような、「表」と「裏」の画像間のアニメーション化された遷移が発生します。リストに含まれている画像の1つをランダムに「めくり」、残りのリスト項目を自動的に循環させる方法を見つける必要があります。裏返した画像は、一定期間（3秒）残ってから、反対側、つまりデフォルトの状態に戻る必要があります。

これの約80％を達成するデモを組み立てました。これまでのところ、ランダムに選択されたリストアイテムがオンロードで正しく表示されていますが、3秒間隔の後に「flipIt」クラスを削除する必要があります。その後、別のカードが裏返されます。これまでのところ、ホバー状態は正常に機能しています。ご覧ください»

次のコードを追加しようとしましたが、リストアイテムが機能すると、リストアイテムが元の状態に戻りません。

this.hide = function(){
    while ($(".thumb").hasClass("flipIt")){
        $(this).find('.thumb-wrapper').removeClass('flipIt');
    };
};

ガイダンスやフィードバックに感謝します！

4

1 に答える 1

0

addClass（ "flipIt"）の後にsetTimeOut（）を試すことができます

これを試して：

this.show = function(){
  ran = getRan(); 
  while (ran == temp){
    ran = getRan();
  }; 
  temp = ran;   
  $("#tips li:nth-child(" + ran + ") .thumb-wrapper").addClass("flipIt");
  setTimeout(function(){
    $("#tips li:nth-child(" + ran + ") .thumb-wrapper").removeClass("flipIt");
  }, 3000);
};
于 2013-03-04T06:10:27.553 に答える