今天讲的是JQ 的动画效果

老规矩，先贴代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.js"></script>
    </head>
    
<style>
body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}
    .box{
        width: 200px;
        height: 200px;
        background: #e9e9e9;
        border: 1px solid #e6e6e6;
        margin-top: 50px;
        line-height: 200px;
        position: absolute;
    }
button{
    border: none;
    background: green;    
    width: 100px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 16px;
    }
</style>
    
    <body>
        <button>点击开始动画</button>
        
        <div class="box" >
            Hello!你好
        </div>
        
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $(".box").animate({
                        right:'150px',
                    });
                });
            });
        </script>
        
    </body>
</html>

先是 作出了 简单的 滑块向右滑动了  150px 的  JQ 代码

要点：

1、事件按钮的选择，并且与click 点击事件 函数相连接 起来

2、节点的选择。在上述的例子中就是 “.box”

3、滑块的 css 属性当中 必须有 position 的 属性值在里面 才能 配合 这个 animate（）；运动起来

 

 

 接下来 再 写一个 稍微复杂一点的效果

jQuery animate() - 使用队列功能

明天再贴代码，小冰子君已经玩儿嗨了...

 

posted @ 2015-01-14 22:42  SmallW  阅读(379)  评论(0)  编辑  收藏  举报