jquery怎么实现按钮淡入淡出
我是想使一个按钮在鼠标指向的时候渐变成另一个图片,鼠标拿开时又渐变回来<styletype="text/css">.m{width:120px;height:120px;...
我是想使一个按钮在鼠标指向的时候渐变成另一个图片,鼠标拿开时又渐变回来
<style type="text/css">
.m{ width:120px; height:120px; position:relative;}
.o{ display:inline-block; width:120px; height:120px; position:absolute;}
.t{ display:inline-block; width:120px; height:120px; position:absolute;}
</style>
<body>
<div class="m">
<a href="#" class="o"><img src="b1.png" /></a>
<a href="#" class="t"><img src="b2.png" /></a>
</div>
</body>
<script type="text/javascript">
$(".m").mouseover(function(){
$(".o").animate({opacity:0},500);
$(".t").animate({opacity:1},500);
});
$(".m").mouseout(function(){
$(".o").animate({opacity:1},500);
$(".t").animate({opacity:0},500);
});
</script>
这是我的代码,但有个BUG是如果我鼠标短时间内多次指向图标又拿开,那么这个图标会一直自己不停的切换,怎么使得鼠标拿开后动画就不执行了 展开
<style type="text/css">
.m{ width:120px; height:120px; position:relative;}
.o{ display:inline-block; width:120px; height:120px; position:absolute;}
.t{ display:inline-block; width:120px; height:120px; position:absolute;}
</style>
<body>
<div class="m">
<a href="#" class="o"><img src="b1.png" /></a>
<a href="#" class="t"><img src="b2.png" /></a>
</div>
</body>
<script type="text/javascript">
$(".m").mouseover(function(){
$(".o").animate({opacity:0},500);
$(".t").animate({opacity:1},500);
});
$(".m").mouseout(function(){
$(".o").animate({opacity:1},500);
$(".t").animate({opacity:0},500);
});
</script>
这是我的代码,但有个BUG是如果我鼠标短时间内多次指向图标又拿开,那么这个图标会一直自己不停的切换,怎么使得鼠标拿开后动画就不执行了 展开
1个回答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询