首页 > 代码库 > jQuery学习-自定义动画

jQuery学习-自定义动画

2024-08-21 12:17:12   223人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义动画</title>
        <script src=http://www.mamicode.com/"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学习-自定义动画


联系
我们