鼠标移入通过时间控制实现两个不同步的动画效果

Posted 2020-12-04 amberoid

//鼠标移入事件，此处使用的是enter，与over不同的是，enter不支持冒泡
$(‘.lis td‘).mouseenter(function(){
$(this).find(‘.tuwz‘).stop().animate({‘margin-top‘:‘-40px‘},500)
//在class名为mis的标签下创建子标签
$(this).find(‘.mis‘).html(‘<div class="yiru">misadidas 定制 <i class="glyphicon glyphicon-circle-arrow-right"></i></div>‘)
$(this).find(‘.yiru‘).css({‘cursor‘:‘pointer‘})
$(this).find(‘.mis‘).css({‘background‘:‘#000‘,‘color‘:‘#fff‘})
//stop：停止之前所有的动作，只执行接下来的动作。
$(this).find(‘.glyphicon‘).stop().animate({‘margin-right‘:‘-10px‘},1000)
}).mouseleave(function(){
$(this).find(‘.tuwz‘).stop().animate({‘margin-top‘:‘0px‘},200)
})