JQueryアニメーションの注文の質問

Question

それで、マウスホバーで背景を変更するロゴを持っています。5つの異なる背景を用意しようとしています。それぞれがマウスホバーに表示され、ランダム化されず、5回目のマウスホバーが完了すると最初の背景に戻ります。どうすればこれを達成できますか?

jqueryスクリプトは次のとおりです

$(document).ready(function(){
  $("#logo").hover(
  function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
  },
  function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
  });
});

そしてCSS

div#logo{
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
    z-index:12;
}

div#logo_hover{
    background-image:url(../images/logo_hover_blue.png);
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
    z-index:11;
}

編集：

Scott Mさんをフォローしました。アドバイスを受けて、このコードを取得しました。

$("#logo").click(function () {
  var color = $(this).css("background-image", "background" + bgnum + ".png");
});

おそらく何かが足りないのでしょう...

しかし問題は、他の div (logo1、logo2、logo3、logo4) をそれぞれの画像とともに追加し、マウスホバーがオンになるまで非表示にしておく方法がわからないことです。最善の方法は何ですか?表示:なし?

Answer 1

カウンターを維持できます (例:bgnum) をファイル名と連結して各背景を取得します。次に、ホバー時に次を使用して CSS を設定します

.css("background-image", "background" + bgnum + ".jpg")

次にカウンターをインクリメントし、持っている背景の数を超えないように 5 ずつ変更します。

bgnum = (bgnum + 1) % 5;