您的位置：首页 > 其它

自定义动画animate

2016-05-25 16:55 288 查看 
一个最简单的自定义动画
HTML：
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<script src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$("div").animate(
{
left: '250px'
}
);

})
});
</script>
<style type="text/css">
div {
background: #98bf21;
height: 100px;
width: 100px;
position: absolute;
}

</style>
</head>

<body>
<button>开始动画</button>
<p>绿块自动滑到中间</p>

<div>

</div>
</body>

</html>

result：





一个稍微复杂的自定义动画

HTML：


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<script src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$("div").animate(
{
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
}
);

})
});
</script>
<style type="text/css">
div {
background: #98bf21;
height: 100px;
width: 100px;
position: absolute;
}

</style>
</head>

<body>
<button>开始动画</button>
<p>div从小到大，从左侧到居中</p>

<div>

</div>
</body>

</html>


result：








                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航