jquery - 使用 jQuery 动画图像

Question

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

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

我该怎么做？

http://www.adhamdannaway.com/about

Answer 1

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>

Answer 2

阅读有关 jQuery 动画功能的信息：http: //api.jquery.com/animate/

Answer 3

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