使用 jQUery 制作动画图像

Question

我正在学习如何制作这个人在他的网站上使用的效果。

我想从左向右移动图像，反之亦然。

我该怎么做？

http://www.adhamdannaway.com/about

Answer 1

了解 jQuery 动画功能：http://api.jquery.com/animate/

Answer 2

假设带有图像标签的 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 毫秒，元素将从它的 -100px 到 0px 动画。

Answer 3

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>