欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery方法---隐藏与显示

程序员文章站 2022-07-13 12:59:25
...

一、隐藏方法

直接隐藏

//当点击按钮时,盒子被隐藏
$("button").click(function(){
	$("div").hide();
});

过渡隐藏

//当点击按钮时,盒子被隐藏,隐藏过程的速度为1s
$("button").click(function(){
	$("div").hide(1000);
});

二、显示方法

直接显示

//当点击按钮时,显示盒子(初始时盒子被隐藏)
$("button").click(function(){
	$("div").show();
});

过渡显示

//当点击按钮时,显示盒子,显示过程的速度为1s
$("button").click(function(){
	$("div").show(1000"swing");
});

其中,函数的第二个参数是缓动函数,缓动函数指定动画效果在执行时的速度,使其看起来更加真实。jQuery只提供linear和swing两种函数,使用其它函数需要插件。关于其它缓动函数,可参照缓动函数速查表https://www.xuanfengge.com/easeing/easeing/.进行查询。

三、隐藏/显示方法切换

//点击按钮可显示或隐藏盒子
$("button").click(function(){
	$("div").toggle();
});
相关标签: jQuery笔记 jquery