jQuery 隐藏和显示动画效果

看代码注释
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <script>
        function f1()
        {
        	//隐藏
        	//$().hide(速度,回调函数);	速度单位是毫秒	里面的参数可写可不写
        	//回调函数,:效果呈现完会自动调用函数执行
        	$('div').hide(2000);	//2秒内隐藏
        }
        
        function f2()
        {
        	//显示
        	//$().show(速度,回调函数);		里面的参数可写可不写
        	$('div').show(hl());  //这儿使用回调函数
        }
        
        function hl()
        {
        	alert('我又回来了');
        }
        
        function f3()
        {
        	//toggle自动判断,如果显示则变为隐藏,若隐藏则变为显示
        	//同样支持时间
        	//$('div').toggle();
        	$('div').toggle(2000);
        }
        
        /*垂直动画效果*/
       
       function f4()
       {
       //隐藏
       //$().slideUp(速度,回调函数);
       $('div').slideUp();       	
       }
       
       function f5()
       {
       //显示
       //$().slideDown(速度,回调函数);
       $('div').slideDown();       	
       }

    </script>
    <style>
        div { height:200px; width:300px; background:lightgreen;}
    </style>
</head>
<body>
<h2 size="6">隐藏和显示动画效果</h2>
<div id="t1">北京今天是个好天气,因为有风</div><br>
<input type="button" value="隐藏" onclick="f1()">
<input type="button" value="显示" onclick="f2()">
<input type="button" value="开关" onclick="f3()"><br><br>
<input type="button" value="垂直隐藏" onclick="f4()">
<input type="button" value="垂直显示" onclick="f5()">
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND