javascript - JQ实现小米网中图片向上移动效果
本文介绍了javascript - JQ实现小米网中图片向上移动效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
当鼠标在图片的时候图片会上移一小段距离,并加上阴影。移开的时候恢复
我是这样做的 比如容器是a 图片是b
$("#b").mouseover(function(){
this.animate({bottom:"10px"})
this.addClass(".xxx") //xxx表示带有阴影的类
})
$("#b").mouseout(function(){
this.animate({top:"10px"})
this.removeClass(".xxx") //xxx表示带有阴影的类
})
似乎实现了,但是只是第一次有效,鼠标滑过 滑出都有效。但是第二次这样的循环后没用了 。也就是只能实现一次效果。请问为什么?
解决方案
建议用hover实现,第一:简单,第二:性能比jq好。
比如矩形的li设置
li.item:{
transition: all .3s;
}
li.item:hover{
margin-top:-3px;
box-shadow: 0 0 5px #ccc;
}
具体的数值你可以自己调,希望对你有所帮助
这篇关于javascript - JQ实现小米网中图片向上移动效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文