0

我想对 div 框应用悬停效果，一个页面上最多可以有 60 个框。它应该与 css 悬停效果相当，但我想对悬停颜色应用淡入淡出效果。例如，我将浅绿色作为背景颜色，将深绿色作为悬停背景颜色，然后它应该从一侧褪色到另一侧。

我玩了一下 jQuery，但可以得到我想要的结果：

    $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 500);
    });
4

6 回答 6

2

你需要使用一个像样的颜色插件。有关更多信息，请参阅jQuery 动画背景颜色。

此外，您的原始代码实际上并不会做任何事情，因为您希望它之后动画成另一种颜色。

$(".box").each( function () {
  $(this).data('baseColor',$(this).css('color'));
  $(this).hover(function() {
    $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
  },function() {
    $(this).animate({ backgroundColor: $(this).data('baseColor') }, 500);
  });
});

编辑：例如参见http://jsfiddle.net/eHXNq/2/ 。

于 2010-12-16T07:26:20.183 回答
0

我对 jQuery 没有太多经验，但它看起来只是一个复制粘贴错误，因为你在两个.animate()s中都有相同的颜色

于 2010-12-16T07:21:19.450 回答
0

我相信您没有hover像应有的那样使用该功能。当用户离开框时使用第二个功能，因此您应该返回原始颜色。

以白色为例：

  $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#FFFFFF" }, 500);
    });
于 2010-12-16T07:21:25.167 回答
0 
$(".box").hover(
  function () {
 // this is mouseover
  }, 
  function () {
//  this is mouse out
  }
);

看这里的例子

http://jsfiddle.net/krRse/

于 2010-12-16T07:27:43.433 回答
0

查看此代码，我认为这可能会对您有所帮助！！！

 <!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>

</body>
</html>

也看看这个链接， http://api.jquery.com/hover/

于 2010-12-16T07:32:41.403 回答
-1

60盒？请使用事件委托，或直播。

于 2010-12-16T07:22:32.933 回答