我想要一个 div 并让背景在 mouseenter 上淡出为白色,并在 mouseout 上淡出为黑色。关于如何在 jQuery 中执行此操作的任何想法?
问问题
21209 次
3 回答
10
使用 JQuery .hover()
$("div" ).hover(
function() {
$(this).animate({backgroundColor: "#fff"}, 'slow');
}, function() {
$(this).animate({backgroundColor:"#000"},'slow');
});
使用 JQuery .mouseover()
$("div")
.mouseover(function() {
$(this).animate({backgroundColor: "#fff"}, 'slow');
})
.mouseout(function() {
$(this).animate({backgroundColor:"#000"},'slow');
});
请注意,您必须使用 jquery-color (用于动画颜色)。https://github.com/jquery/jquery-color/
于 2013-10-18T04:59:01.070 回答
2
您需要使用jQuery UI 库或jQuery Colors来启用颜色动画
$('div').hover(function () {
$(this).stop(true, true).animate({
backgroundColor: 'black'
})
}, function () {
$(this).stop(true, true).animate({
backgroundColor: 'white'
})
})
演示:小提琴
于 2013-10-18T05:00:35.330 回答
0
OP 请求 jQuery。对于那些试图在没有 jQuery 的情况下自由发挥的人:
<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var unBlue=100;
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
if(unBlue<255) document.getElementById("x").style.backgroundColor="rgb(255,255,"+unBlue+")";
else clearInterval(gEvent);
unBlue+=10;
}
</script>
于 2016-05-10T21:34:36.383 回答