•  10-10-2019
  •  | 
  •  

题

我想对悬停效果进行分割，在页面上可能最多可容纳60个框。它应该非常等于CSS悬停效果，但我想对悬停颜色应用淡淡的效果。例如，我的浅绿色为背景颜色和深绿色，如悬停的背景颜色，然后它应该从一侧褪色。

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

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

解决方案

您需要使用 体面的颜色插件. 。看 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/ 例如。

其他提示

我在jQuery方面没有太多经验，但看起来只是一个复制和纸质错误，因为您在两者中都有相同的颜色 .animate()s

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

例如，白色：

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

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

请参阅此处的示例

http://jsfiddle.net/krrse/

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

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

60箱？请使用活动委托或现场演出。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top