jQuery hover animation
I want to appy a hover effect to div boxes, may be up to 60 boxes on a page. It should be quite equal to the css hover effect but I want to apply a fade effect to the hover color. E.g. 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:
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});
You need to use a decent color plug-in. See jQuery animate backgroundColor for more information.
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.
I don't have much experience with jQuery, but it looks like just a copy-and-paste mistake, since you have the same color in both .animate()s
I believe you are not using the hover function like you should. 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);
});
$(".box").hover(
function () {
// this is mouseover
},
function () {
// this is mouse out
}
);
see example here
http://jsfiddle.net/krRse/
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/
60 boxes? Please use event delegation, or live.
加载中,请稍侯......
精彩评论