年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1691|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 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>

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 04:02 , Processed in 0.065457 second(s), 22 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表