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;

Jquery动画订单问题

1 个答案: