JQ实现小米网中图片向上移动效果

Question

当鼠标在图片的时候图片会上移一小段距离，并加上阴影。移开的时候恢复我是这样做的 比如容器是a 图片是b$("#b").mouseover(function(){this.animate({bottom:"10px"})this.addClass(".xxx")  //xxx表示带有阴影的类}) $("#b").mouseout(function(){this.animate({top:"10px"})this.removeClass(".xxx")  //xxx表示带有阴影的类})似乎实现了，但是只是第一次有效，鼠标滑过 滑出都有效。但是第二次这样的循环后没用了 。也就是只能实现一次效果。请问为什么？

Answer 1

建议用hover实现，第一：简单，第二：性能比jq好。
比如矩形的li设置

li.item:{    transition: all .3s;
}li.item:hover{    margin-top:-3px;    box-shadow: 0 0 5px #ccc;
}

具体的数值你可以自己调，希望对你有所帮助