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;