17、jQuery自定义动画的基本使用

Sian · 发表于 2016-2-21 14:21:25

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            width: 160px;
            border: 1px solid #555;
            background: #AAA;
        }
        li{
            margin: 0;
            padding:5px 0 5px 20px;
            border-bottom: 1px solid green;
            font-size: 15px;
            font-weight: bold;
        }
        a{
            color: white;
            text-decoration: none;
            padding-right: 50px;
            white-space: nowrap;
        }
        .even{
            background: #808080;
        }
    </style>
    <script>
        $(document).ready(function(){
            // 卷帘动画
            $('button:eq(0)').click(function(){
                $('ul').slideToggle(300);
            });
            // 停止动画
            $('button:eq(1)').click(function(){
                $('ul').stop();
            });
            // 0.3秒卷帘弹出，延时1秒后再淡出
            $('button:eq(2)').click(function(){
                $('ul').slideDown(300).delay(1000).fadeOut(400);
            }); 
             
            // animate(css样式)
            $('a').mouseover(function(){
                $(this).animate(
                    {paddingLeft:'20px'}
                );
            }).mouseout(function(){
                $(this).animate(
                    {paddingLeft:'0px'}
                );
            });
        });
    </script>
</head>
<body>
    <button>one</button><button>two</button><button>three</button><button>Four</button>
    <ul>
        <li><a href="">PHP 资讯</a></li>
        <li><a href="">iOS 资讯</a></li>
        <li><a href="">Android 资讯</a></li>
        <li><a href="">jQuery 资讯</a></li>
        <li><a href="">JavaScript 资讯</a></li>
    </ul>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 17、jQuery自定义动画的基本使用

相关帖子