首页 > 代码库 > jQuery--自定义动画animate()

jQuery--自定义动画animate()

2024-09-24 16:53:02   220人阅读

语法结构

animate(params,speed,callback)

params：包含一个样式属性及值的映射。比如{property1:‘value1‘,property:‘value2‘,......}

speed：速度参数，可选。

callback：在动画完成时执行的函数，可选

1、自定义简单动画，使元素在3秒（3000毫秒），向右移动500像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #panel{
            position: relative;
            width: 100px;
            height: 100px;
            border:1px solid black;
            background: red;
            cursor: pointer;
            opacity: 0.5;
        }
    </style>
    <script type="text/javascript" src=http://www.mamicode.com/‘jquery-3.2.1.min.js‘></script>
    <script type="text/javascript">
        $(function(){
            $(‘#panel‘).click(function(){
                $(this).animate({left:‘500px‘},3000)
            });
        });
    </script>
</head>
<body>
    <div id="panel"></div>
</body>
</html>

2、累加、累减动画

‘-=‘或者‘+=‘表示在当前位置累加或者累减

$(function(){
            $(‘#panel‘).click(function(){
                $(this).animate({left:‘+=500px‘},3000)
        　　});
});

3、多重动画

　　1）、同时执行多个动画

$(function(){
            $(‘#panel‘).click(function(){
                $(this).animate({left:‘+=500px‘,height:‘200px‘},3000);
            });
});

　　2）、按顺序执行多个动画

$(function(){
            $(‘#panel‘).click(function(){
                $(this).animate({left:‘+=500px‘},3000).animate({height:‘200px‘},3000);
        　　});
});

4、综合动画

单击div元素，让他向右移动的同时增加他的高度，并将不透明从50%变成100%，然后在从上到下移动，同时他的宽度变大，当完成这些效果后，让他以淡出的方式隐藏

$(function(){
            $(‘#panel‘).click(function(){
                $(this).animate({left:‘500px‘,height:‘200px‘,opacity:‘1‘},3000).animate({top:‘100px‘,width:‘200px‘},3000).fadeOut(3000);
            });
});

5、回调函数

最后一步切换div的CSS样式

$(function(){
            　　$(‘#panel‘).click(function(){
                　　$(this).animate({left:‘500px‘,height:‘200px‘,opacity:‘1‘},3000).animate({top:‘100px‘,width:‘200px‘},3000,function(){
                    　　$(this).css(‘border‘,‘10px solid black‘);
                　　});
            });
});

 

jQuery--自定义动画animate()


联系
我们