• 技术文章 >web前端 >前端问答

    jquery怎么实现div渐隐效果

    青灯夜游青灯夜游2022-09-14 18:42:17原创146

    三种实现方法:1、用fadeOut()逐渐改变被选元素的不透明度,从可见到隐藏,语法“元素对象.fadeIn(渐隐时长)”;2、用fadeTo()逐渐改变被选元素的不透明度,语法“元素对象.fadeTo(渐隐时长,0)”;3、用fadeToggle()逐渐改变被选元素的不透明度,语法“元素对象.fadeToggle(渐隐时长)”。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

    在jquery中,能实现div渐隐效果的有三个方法:

    1、fadeOut() 方法

    fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(渐隐褪色效果)。

    语法:

    $(selector).fadeOut(speed,easing,callback)
    参数描述
    speed可选。规定褪色效果的速度。

    可能的值:

    • 毫秒
    • "slow"
    • "fast"
    easing可选。规定在动画的不同点上元素的速度。默认值为 "swing"。

    可能的值:

    • "swing" - 在开头/结尾移动慢,在中间移动快
    • "linear" - 匀速移动
    提示:扩展插件中提供更多可用的 easing 函数。
    callback可选。fadeOut() 方法执行完之后,要执行的回调函数。

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-3.6.1.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("button").click(function() {
    					$("#div1").fadeOut();
    					$("#div2").fadeOut("slow");
    					$("#div3").fadeOut(3000);
    				});
    			});
    		</script>
    	</head>
    
    	<body>
    		<p>以下实例演示了 fadeOut()  使用了不同参数的效果。</p>
    		<button>点击渐隐div元素。</button>
    		<br><br>
    		<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
    		<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
    		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    
    	</body>
    </html>

    1.gif

    2、fadeTo() 方法

    fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

    语法:

    $(selector).fadeTo(speed,opacity,callback);

    只需要将opacityc参数的值设置为0,即可实现渐隐效果。

    $(document).ready(function() {
    	$("button").click(function() {
    		$("#div1").fadeTo("fast",0);
    		$("#div2").fadeTo("slow",0);
    		$("#div3").fadeTo(3000,0);
    	});
    });

    2.gif

    3、fadeToggle() 方法

    fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    $(document).ready(function() {
    	$("button").click(function() {
    		$("#div1").fadeToggle();
    		$("#div2").fadeToggle("slow");
    		$("#div3").fadeToggle(5000);
    	});
    });

    3.gif

    【推荐学习:jQuery视频教程web前端

    以上就是jquery怎么实现div渐隐效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery eq()方法有什么用 下一篇:html中哪个是头部标签
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• jquery动画队列是什么意思• jquery怎么移除style部分样式• jquery可以获取上一级元素吗• jquery怎么点击其他元素隐藏div元素• jquery怎么判断元素是否只读• 2.0版本的jquery支不支持ie8
    1/1

    PHP中文网