jquery animate动画函数用法举例

发布时间:2020-04-03编辑:脚本学堂
分享一个jquery中使用animate函数的例子,学习下jquery animate函数的用法,有需要的朋友参考下。

本节内容:
jquery animate动画函数的用法

Jquery animate 官方地址 http://api.jquery.com/animate/

.animate( properties, [duration,] [easing,] [complete] )   version added: 1.0

properties A map of CSS properties that the animation will move toward.

duration A string or number determining how long the animation will run.

easing A string indicating which easing function to use for the transition.

complete A function to call once the animation is complete.

.animate( properties, options )  version added: 1.0

properties A map of CSS properties that the animation will move toward.

options A map of additional options to pass to the method. Supported keys:

duration: A string or number determining how long the animation will run.(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing: A string indicating which easing function to use for the transition.(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
complete: A function to call once the animation is complete.在动画完成时执行的函数
step: A function to be called after each step of the animation.在动画每一步执行的函数
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数。

例子:
 

复制代码 代码示例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery animate动画函数-www.jb200.com</title>
<style>
  div { margin:3px; width:40px; height:40px;background-color:#FCC; display:none; text-align:right; }
</style>
<script src="/jquery/1.4.2/jquery.min.js"></script>

</head>

<body>
  <div id="t1">jquery animate动画函数</div>
 <script>
function runIt() {
    $("#t1").animate({width: '80%'}, "3000", "swing",function(){$("#t1").html($("#t1").width());});
    $('#t1').animate({width: '50%',opacity: .5},{duration:'3000',easing:"swing",
            step: function(now, fx) {
                var data = fx.elem.id + '---' + fx.prop + ': ' + now;
                $('#t1').html(data );
              },
            complete:function(){
                $('#t1').append('--|--complete--|--');
            }
        });
}
runIt();
</script>
</body>
</html>