Question

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

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

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

Answer 1

您需要使用decent color plug-in。有关详细信息，请参阅jQuery animate backgroundColor。

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

$(".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/。

Answer 2

我对jQuery没有多少经验，但它看起来只是一个复制粘贴错误，因为你在.animate() s

中都有相同的颜色

Answer 3

我相信你没有像你应该那样使用hover功能。当用户离开盒子时使用第二个功能，所以你应该恢复原来的颜色。

白色例如：

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

Answer 4

$(".box").hover(
  function () {
 // this is mouseover
  }, 
  function () {
//  this is mouse out
  }
);

参见此处的示例

http://jsfiddle.net/krRse/

Answer 5

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

 <!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/

Answer 6

60盒？请使用活动委托或直播。

jQuery悬停动画

6 个答案: