JQuery 动画效果

1、show和hide

show(时间)，hide(时间)，用于隐藏和展示，时间单位为毫秒。

<script>
        $(function () {
            $('#btnshow').click(function () {
                $('#border').show(1000);
            });
            $('#btnhide').click(function () {
                $('#border').hide(1000);
            });
        });
    </script>
</head>
<body>
    <input type="button" value="显示" id="btnshow" />
    <input type="button" value="隐藏" id="btnhide" />
    <div id="border"></div>
</body>

2、show和hide的合成动画。toggle.例子跟上面相似。

3、下拉和收起：slidedown、slideup

4、渐显和渐隐：fadeIn、fadeOut

fadeTo(时间,opacity)：是指定透明度效果，值为0-1

5、可以在动画函数中传递一个callback，表示动画完成后在每个元素上执行此函数。

二、自定义动画

1、animate自定义自己的样式：

<script>
        $(function () {
            $('#btnchange').click(function () {
                $('#btndiv').animate(
                    {
                        'width': '50px',
                        'height': '50px'
                    },1000);
            });
        });
 </script>

2、animated停止当前动画

 1 <style>
 2         #btndiv {
 3             width: 100px;
 4             height:100px;
 5             background-color: black;
 6         }
 7     </style>
 8     <script src="jquery-1.7.1.min.js"></script>
 9     <script>
10         $(function () {
11             $('#btnchange').click(function () {
12                 $('#btndiv').animate(
13                     {
14                         'width': '50px',
15                         
16                     }, 3000).animate(
17                     {
18                         'height':'50px',
19                     }, 3000);
20             });
21             //停止当前改变宽度的动画，但是不停止改变高度的动画
22             $('#btnzan').click(function () {
23                 $(':animated').stop();
24             });
25             //停止所有的动画
26             $('#btnall').click(function () {
27                 $(':animated').stop(true);
28             });
29         });
30     </script>
31 </head>
32 <body>
33     <input type="button" id="btnchange" value="改变" /> 
34     <input type="button" id="btnzan" value="停止当前动画" />
35     <input type="button" id="btnall" value="停止所有动画" />
36     <div id="btndiv"></div>
37 </body>

View Code

3、例子：点击好友的时候显示好友列表，点击黑名单的时候，显示黑名单列表

 1 <script src="jquery-1.7.1.min.js"></script>
 2     <script>
 3         $(function () {
 4             $('ul').hide(); //打开的时候把所有的ul都隐藏
 5             //当鼠标移到span 的时候，鼠标会变成鼠标手
 6             $('span').css('cursor', 'pointer')
 7                 .click(function () {
 8                     //被点击的时候显示后面的ul
 9                     $(this).next().next().slideDown(100)
10                         //点击其中一个，另外一个就会收起来的
11                         .siblings('ul').slideUp(100)
12                 });
13         });
14     </script>
15 </head>
16 <body>
17     <span>我的好友</span><br/>
18     <ul>
19         <li>好友1</li>
20         <li>好友2</li>
21         <li>好友3</li>
22         <li>好友4</li>
23     </ul>
24     <span>我的黑名单</span><br />
25     <ul>
26         <li>黑名单1</li>
27         <li>黑名单2</li>
28         <li>黑名单3</li>
29         <li>黑名单4</li>
30     </ul>
31 </body>

View Code

猜你喜欢