jQuery学习-自定义动画

Posted whzym111

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习-自定义动画相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义动画</title>
        <script src="js/jquery.js"></script>
    
        <style>
        .me1{ 
            position: absolute;
            left: 20%;
            top: 50%;
            margin-left: -150px;
            margin-top: -75;
            width: 400px;
            height: 100px;
            background-color: orange;
            overflow: auto;
            padding: 10px;
            border: 30px solid lightblue;
            
        }
        
        .me2{ 
            position: absolute;
            left: 70%;
            top: 50%;
            margin-left: -200px;
            margin-top: -75;
            width: 400px;
            height: 100px;
            background-color: blue;
            overflow: auto;
            padding: 10px;
            border: 30px solid orange;
            
        }
    
        </style>
        <script type="text/javascript">    
            //页面加载完成简写形式
            $(function(){
                //animate 第一参数 目标值 第二个参数持续时间  
            $(".me1").animate({left:"60%",top:"80%",width:"5%",height:"5%",borderWidth:"1px"},
                              {queue:true, duration: 1000} //queue使用队列动画
                              )
            $(".me1").animate({left:"20%",top:"50%",width:"20%",height:"20%",borderWidth:"30px"},
                              {queue:true, duration: 1000} //queue使用队列动画
                              )
            })
        
        </script>
    </head>
    <body>
        <div class="me1"></div>
        <div class="me2"></div>
    </body>
</html>

 

以上是关于jQuery学习-自定义动画的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段7——CSS动画

jQuery学习-自定义动画

使用删除与隐藏时未调用自定义动画

jQuery动画之自定义动画

Java技术jQuery自定义插件开发实践

深入学习jQuery动画控制