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()
        {
        	//隐藏  渐变浅色
        	//$().fadeOut(速度,回调函数);	速度单位是毫秒	里面的参数可写可不写
        	//回调函数,:效果呈现完会自动调用函数执行
        	$('div').fadeOut(2000);	//2秒内隐藏
        }
        
        function f2()
        {
        	//显示
        	//$().fadeIn(速度,回调函数);		里面的参数可写可不写
        	$('div').fadeIn(4000,hl());  //这儿使用回调函数
        }
        
        function hl()
        {
        	alert('我又回来了');
        }
        
        function f3()
        {
        	//fadeToggle,如果显示则变为隐藏,若隐藏则变为显示
        	//同样支持时间
        	//$('div').fadeToggle();
        	$('div').fadeToggle(2000);
        }
        
        /*动画效果联合处理*/
       function f4()
       {
       	$('div').hide(2000,f5);
       }
       
       function f5()
       {
       	$('div').css('background','blue');
       	$('div').slideDown(2000,f6);
       }
       function f6()
       {
       	$('div').css('background','purple');
       	$('div').slideUp(2000,f4);
       }

    </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()">
</body>
</html>

评论

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

修远兮

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

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

推荐文章RECOMMEND