js问题 jquery问题 jquery的animate重复执行应该怎么解决

$(document).ready(function(){$(".main-dibanulliimg").mouseover(function(){$(this).ani... $(document).ready(function(){
$(".main-diban ul li img").mouseover(function(){
$(this).animate({width:"50px"},1000);
});
$(".main-diban ul li img").mouseout(function(){$(this).animate({width:"80"},1000);
});
})//多次用鼠标指向和离开图片的时候当我鼠标停止的时候图片任然在持续变宽变窄,鼠标指向和离开多少次它就执行多少次,应该怎么解决?
展开
 我来答
匿名用户
2013-04-19
展开全部
<script type="text/javascript">
/*可用stop()函数立即停止动画,再去执行当前时间产生的效果。这样却产生了一个问题:比如我的mouseover时间刚执行了500毫秒,但是我马上执行
mouseout的实现效果了,用了1000毫秒去完成本来500秒能完成的事件效果,这个在视觉上和效益上都有点问题,因此本人想出了一个小方法,有点戳,莫见笑:
定义一个计数器timer,默认值是1000,如果未中断动画时间为timer赋值1000,否则,即任何状况的动画执行过程被中断,则下一个动画事件执行时间:
timer=未执行效果效益百分比*1000
*/
$(document).ready(function(){
var timer = 1000;
$(".main-diban ul li img").mouseover(function(){
if($(this).is(":animated"))
{
//它要变小所以 时间为:效益差百分比*效益时间
timer=($(this).width()-50)/30*1000;
$("#test").html(timer);
}
else
{
timer = 1000;
}
$(this).stop().animate({width:"50px"},timer);
});
$(".main-diban ul li img").mouseout(function(){
if($(this).is(":animated"))
{
//原理同上
timer=(80-$(this).width())/30*1000;
}
else
{
timer = 1000;
}
$(this).stop().animate({width:"80px"},timer);
});
})
</script>
百度网友dbce560
推荐于2018-03-07 · TA获得超过1036个赞
知道小有建树答主
回答量:217
采纳率:50%
帮助的人:194万
展开全部
$(this).animate({width:"50px"},1000);

这一句更改为:

$(this).stop().css({width:"80"}).animate({width:"50px"},1000);     //先停止上一次动作,并复原图片尺寸,再执行动画

 

 

$(this).animate({width:"80"},1000);

这一句更改为:

$(this).stop().css({width:"50"}).animate({width:"80px"},1000);     //先停止上一次动作,并复原图片尺寸,再执行动画
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
峰峰考古
2013-04-19 · 超过27用户采纳过TA的回答
知道答主
回答量:104
采纳率:100%
帮助的人:81.8万
展开全部
$(document).ready(function(){
if( !$(".main-diban ul li img").is(":animated") ){
$(".main-diban ul li img").mouseover(function(){
$(this).animate({width:"50px"},1000);
});
$(".main-diban ul li img").mouseout(function(){$(this).animate({width:"80"},1000);
});
}
})
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
吃心不改Pro
2013-04-19 · 狂吃不胖的瘦猴~
吃心不改Pro
采纳数:1482 获赞数:10786

向TA提问 私信TA
展开全部
执行animate前先结束动作
$(this).stop(true,true).animate{......}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
小宝爸爸笔记
2013-04-19 · TA获得超过2297个赞
知道小有建树答主
回答量:904
采纳率:50%
帮助的人:661万
展开全部
这样的句子干嘛不写在css里面
.main-diban ul li img:hover{
width:80px;
}
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式