Javascript jQuery悬停动画_Javascript_Jquery_Jquery Hover

Javascript jQuery悬停动画

javascript jquery

Javascript jQuery悬停动画,javascript,jquery,jquery-hover,Javascript,Jquery,Jquery Hover,我想将悬停效果应用于div框，一页上最多可以有60个框。它应该与css悬停效果相当，但我想对悬停颜色应用淡入效果。例如，我有浅绿色作为背景色，深绿色作为悬停背景色，然后它应该从一个方向淡入另一个方向我使用jQuery进行了一些尝试，但可以得到我想要的结果： $(".box").hover(function() { $(this).animate({ backgroundColor: "#68BFEF" }, 1000); },function() {

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

我使用jQuery进行了一些尝试，但可以得到我想要的结果：

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

我对jQuery没有太多经验，但它看起来只是一个复制粘贴错误，因为您在

.animate（）

中使用了相同的颜色。我相信您没有像应该使用的那样使用

hover

功能。第二个功能是在用户离开框时使用的，因此您应该返回到原始颜色

白色，例如：

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

60箱？请使用事件委派或live。

您需要使用活动委派。有关更多信息，请参阅

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

$(".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);
  });
});

编辑：参见示例

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

参见这里的示例

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

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


ul{左边距：20px；颜色：蓝色；}
li{cursor:default；}
span{颜色：红色；}

牛奶
面包
芯片
袜子

$（“li”）。悬停(
函数（）{
$（此）。追加（$（“***”）；
}, 
函数（）{
$（this.find（“span:last”）.remove（）；
}
);
//李老师和班
$（$li.fade”）.hover（函数（）{$（this.fadeOut（100）；$（this.fadeIn（500）；}）；

再看看这个链接,，

认为这应该是一个评论，因为它并不能真正回答问题。不过我同意。delegate（）是一件美好的事情。@RageZ，这不是关于捕获所有事件，而是关于dom中事件的激增。当两个委派的事件可以完成相同的事情时，您不希望120个事件都做相同的事情。默认情况下，jQuery无法进行颜色转换，这就是问题所在。这是+1对于指向适当解决方案的链接，当我将框悬停时，我会得到另一种与预期相同的bgcolor，但当我离开框时，颜色会淡出其默认值，这不起作用……你能发布一些HTML/CSS吗？也许是在JSFIDLE中？我发现了一个例子，它准确地描述了我需要的东西，感谢您的帮助，因为框可以有不同的颜色。有没有办法通过jQuery获取当前颜色，或者我必须对每个框应用颜色属性来通过jQuery中的选择器检索它？