阅读有关jQuery animate函数的信息：http://api.jquery.com/animate/

假设带有图像标记的HTML如下所示：

<img class="left-right" src="img-url.com"/>
<img class="right-left" src="img-url.com"/>

您的css最初应该是这样的：

.left-right {
   position: absolute;
   left: -100px;
}

.right-left {
   position: absolute;
   right: -100px;
}

只是为了确保它不在视口中，我们将它放置在帧的边界之外。
然后使用jQuery动画，我们需要添加一个事件：

$(".left-right").focus(function () {
    $(this).animate({left: "0px"}, 1000);
}); 

$(".right-left").focus(function () {
    $(this).animate({right: "0px"}, 1000);
});

这里的1000是1000 ms，元素将在此期间从-100px变为0 px。

100%动画代码（此代码将工作动画所有图像或div有类动画个别）

<script language="javascript" type="text/javascript">
$(document).ready(function(){

$(".animation").mouseover(function(){
   $(this).animate({
                      height:'200px',
                      width:'200px',
                      left : '-11px'
                    })
                            });

$(".animation").mouseout(function(){
   $(this).animate({
                      height:'178px',
                      width:'178px',
                      left : '0px'
                    })
                            });

});
</script>