divボックスにホバー効果を適用したいのですが、1ページに最大60個のボックスがあります。これはcssホバー効果とまったく同じであるはずですが、ホバーカラーにフェード効果を適用したいと思います。たとえば、背景色として薄緑、ホバー背景色として濃い緑がある場合、一方から反対側にフェードするはずです。
私はjQueryで少し遊んでいましたが、私が望む結果を得ることができました：
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});
まともな色のプラグインを使用する必要があります。詳細については、 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/を参照してください。
$(".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>
このリンクも見て ください。 http://api.jquery.com/hover/
.animate()jQueryの経験はあまりありませんが、両方の色が同じであるため、コピーアンドペーストの間違いのように見えます
私はあなたがhoverすべきように機能を使用していないと信じています。2 番目の関数は、ユーザーがボックスを離れるときに使用されるため、元の色に戻る必要があります。
白の例：
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#FFFFFF" }, 500);
});
60箱？イベントの委任、またはライブを使用してください。