jQuery 效果方法学习笔记

jQuery 是一种非常流行的 JavaScript 库，用于简化 HTML5 文档遍历、事件处理、动画和 Ajax 操作。在 jQuery 中，有很多效果方法可用于创建各种动态效果，使用户界面更具吸引力。

下面是一些常见的 jQuery 效果方法及其示例：

1. 显示和隐藏效果

1.1 show()

show() 方法可以用于显示被隐藏的 HTML 元素。语法如下：

javascriptCopy Code
$(selector).show(speed,easing,callback);

selector：必需，用于选择要显示的元素。
speed：可选，指定显示效果的速度，默认为 400 毫秒。
easing：可选，指定显示效果的缓动函数，默认为 "swing"。
callback：可选，显示效果完成后要执行的函数。

示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>show() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<button onclick="$(this).hide();$('#text').show('slow');">显示文本</button>
<p id="text" style="display:none;">这是要显示的文本。</p>

</body>
</html>

1.2 hide()

hide() 方法可以用于隐藏 HTML 元素。语法如下：

javascriptCopy Code
$(selector).hide(speed,easing,callback);

selector：必需，用于选择要隐藏的元素。
speed：可选，指定隐藏效果的速度，默认为 400 毫秒。
easing：可选，指定隐藏效果的缓动函数，默认为 "swing"。
callback：可选，隐藏效果完成后要执行的函数。

示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>hide() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<button onclick="$(this).hide();$('#text').hide('slow');">隐藏文本</button>
<p id="text">这是要隐藏的文本。</p>

</body>
</html>

2. 淡入淡出效果

2.1 fadeIn()

fadeIn() 方法可以用于淡入 HTML 元素。语法如下：

javascriptCopy Code
$(selector).fadeIn(speed,easing,callback);

selector：必需，用于选择要淡入的元素。
speed：可选，指定淡入效果的速度，默认为 400 毫秒。
easing：可选，指定淡入效果的缓动函数，默认为 "swing"。
callback：可选，淡入效果完成后要执行的函数。

示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>fadeIn() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<button onclick="$(this).hide();$('#text').fadeIn('slow');">淡入文本</button>
<p id="text" style="display:none;">这是要淡入的文本。</p>

</body>
</html>

2.2 fadeOut()

fadeOut() 方法可以用于淡出 HTML 元素。语法如下：

javascriptCopy Code
$(selector).fadeOut(speed,easing,callback);

selector：必需，用于选择要淡出的元素。
speed：可选，指定淡出效果的速度，默认为 400 毫秒。
easing：可选，指定淡出效果的缓动函数，默认为 "swing"。
callback：可选，淡出效果完成后要执行的函数。

示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>fadeOut() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<button onclick="$(this).hide();$('#text').fadeOut('slow');">淡出文本</button>
<p id="text">这是要淡出的文本。</p>

</body>
</html>

3. 滑动效果

3.1 slideDown()

slideDown() 方法可以用于向下滑动显示 HTML 元素。语法如下：

javascriptCopy Code
$(selector).slideDown(speed,easing,callback);

selector：必需，用于选择要向下滑动显示的元素。
speed：可选，指定向下滑动效果的速度，默认为 400 毫秒。
easing：可选，指定向下滑动效果的缓动函数，默认为 "swing"。
callback：可选，向下滑动效果完成后要执行的函数。

示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>slideDown() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style type="text/css">
    	#panel, #flip {
		    padding: 5px;
		    text-align: center;
		    background-color: #e5eecc;
		    border: solid 1px #c3c3c3;
		    margin-bottom: 10px;
		}
		#panel {
		    padding: 50px;
		    display: none;
		}
    </style>
</head>
<body>

<div id="flip">向下滑动显示面板</div>
<div id="panel">这是要显示的内容。</div>

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>

</body>
</html>

3.2 slideUp()

slideUp() 方法可以用于向上滑动隐藏 HTML 元素。语法如下：

javascriptCopy Code
$(selector).slideUp(speed,easing,callback);

selector：必需，用于选择要向上滑动隐藏的元素。
speed：可选，指定向上滑动效果的速度，默认为 400 毫秒。
easing：可选，指定向上滑动效果的缓动函数，默认为 "swing"。
callback：可选，向上滑动效果完成后要执行的函数。

示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>slideUp() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style type="text/css">
    	#panel, #flip {
		    padding: 5px;
		    text-align: center;
		    background-color: #e5eecc;
		    border: solid 1px #c3c3c3;
		    margin-bottom: 10px;
		}
		#panel {
		    padding: 50px;
		}
    </style>
</head>
<body>

<div id="flip">向上滑动隐藏面板</div>
<div id="panel">这是要隐藏的内容。</div>

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideUp("slow");
    });
});
</script>

</body>
</html>

以上是常见的 jQuery 效果方法及其示例，希望对你有所帮助。