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是1000ms，元素将从-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>

使用jquery为图像添加动画效果

3 个答案: