jQuery悬停动画
[英]jQuery hover animation
问题描述
I want to appy a hover effect to div boxes, may be up to 60 boxes on a page. 
我想对div框应用悬停效果，在页面上最多可以容纳60个框。 It should be quite equal to the css hover effect but I want to apply a fade effect to the hover color. 它应该与css悬停效果相当，但是我想对悬停颜色应用淡入淡出效果。 Eg I have light green as background color and dark green as hover background color, then it should fade from the one to the other side. 例如，我将浅绿色作为背景色，将深绿色作为悬停背景色，那么它应该从一侧逐渐淡入另一侧。
I played a bit around with jQuery but could get the result that I wanted: 我使用了jQuery，但可以得到想要的结果：
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});
6 个解决方案
解决方案1
2 已采纳 2010-12-16 07:26:20
You need to use a decent color plug-in . 您需要使用适当的彩色插件 。 See jQuery animate backgroundColor for more information. 有关更多信息，请参见jQuery animate backgroundColor 。
Also, your original code is not really going to do anything, as you want it to animate to another colour afterwards. 同样，您的原始代码实际上并不会做任何事情，因为您希望它随后可以动画化为另一种颜色。
$(".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);
});
});
EDIT: see http://jsfiddle.net/eHXNq/2/ for example. 编辑：例如，请参阅http://jsfiddle.net/eHXNq/2/ 。
解决方案2
0 2010-12-16 07:21:19
我没有jQuery的丰富经验，但是看起来像是复制粘贴错误，因为两个.animate()的颜色相同
解决方案3
0 2010-12-16 07:21:25
I believe you are not using the hover function like you should. 我相信您没有像应该那样使用hover功能。 the second function is used when the user leave the box so your should return to the original color. 用户离开盒子时使用第二个功能，因此您应该返回到原始颜色。
White for example: 以白色为例：
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#FFFFFF" }, 500);
});
解决方案4
0 2010-12-16 07:27:43
$(".box").hover(
function () {
// this is mouseover
},
function () {
// this is mouse out
}
);
see example here 在这里查看示例
解决方案5
0 2010-12-16 07:32:41
review this code, I think this might help you!!! 查看此代码，我认为这可能对您有帮助！！！
<!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>
take a look at this link too, http://api.jquery.com/hover/ 也可以看看此链接， http：//api.jquery.com/hover/
解决方案6
-1 2010-12-16 07:22:32
60 boxes? 60盒？ Please use event delegation, or live. 请使用事件委托或直播。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.