您的位置：首页 > Web前端 > JQuery

【问题】jQuery中的animate和CSS中的动画及其回调函数的问题

2012-02-16 17:09 381 查看
animate是jQuery中做动画很常用的函数，执行 CSS 属性集的自定义动画。

原理：该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

具体内容及实例见：

http://www.w3school.com.cn/jquery/effect_animate.asp

对于该页给出的left实例做了修改如下

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){

$("p").css('opacity','0');

$("p").animate({left:"+=100px"},600,function(){
$("p").css('opacity','1');

//注释：$("p").css('left','+=100px');

});

});
$(".btn2").click(function(){
$("p").animate({left:"0"});
$("p").css('opacity','0');

});
});
</script>
</head>
<body>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
<div style="position:relative">
<p style="background-color:yellow;width:100px;position:absolute;display:block">This is a paragraph.</p>
</div>
</body>
</html>


注释行能替换掉上面的三行并且效果一样（时间除外），但是为什么同样的

//注释：el.css('left','+=960px')

el.css('opacity', '0');
el.animate({left:'+=960px'},600,function(){
$(this).css('opacity', '1');
});

//注释el.css('-webkit-transform', 'translate(480px,0px)').css('visibility', 'visible');


中间三行和下面的注释都不能达到第一行注释的效果，莫名其妙，貌似 $(this).css('opacity', '1');在动画开始时就执行了，这是怎么回事？？？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航