jQuery懸停動畫
[英]jQuery hover animation
問題描述
我想對div框應用懸停效果，在頁面上最多可以容納60個框。 它應該與css懸停效果相當，但是我想對懸停顏色應用淡入淡出效果。 例如，我將淺綠色作為背景色，將深綠色作為懸停背景色，那么它應該從一側逐漸淡入另一側。
我使用了jQuery，但可以得到想要的結果：
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});
6 個解決方案
解決方案1
2 已采納 2010-12-16 07:26:20
您需要使用適當的彩色插件 。 有關更多信息，請參見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/ 。
解決方案2
0 2010-12-16 07:21:19
我沒有jQuery的豐富經驗，但是看起來像是復制粘貼錯誤，因為兩個.animate()的顏色相同
解決方案3
0 2010-12-16 07:21:25
我相信您沒有像應該那樣使用hover功能。 用戶離開盒子時使用第二個功能，因此您應該返回到原始顏色。
以白色為例：
$(".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
}
);
在這里查看示例
解決方案5
0 2010-12-16 07:32:41
查看此代碼，我認為這可能對您有幫助！！！
<!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/
解決方案6
-1 2010-12-16 07:22:32
60盒？ 請使用事件委托或直播。
jQuery旋鈕懸停動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.