jQuery效果
Posted JSW79
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery效果相关的知识，希望对你有一定的参考价值。
基本显示
一、显示show()
show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
语法
$(selector).show(speed,easing,callback)
二、隐藏hide()
hide() 方法隐藏被选元素。
提示：这与 CSS 属性 display:none 类似。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）。
语法
$(selector).hide(speed,easing,callback)
三、切换toggle()
toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。
该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种切换的效果。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）。
提示：该方法可被用于自定义函数之间的切换。
$(selector).toggle(speed,easing,callback)
三个效果都有同样的参数，描述如下：
| 参数 | 描述 |
|---|---|
| speed | 可选。规定隐藏/显示效果的速度。可能的值： 毫秒 "slow" "fast" |
| easing | 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。可能的值： "swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动 提示：扩展插件中提供更多可用的 easing 函数。 |
| callback | 可选。方法执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 |
演示代码：
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(\'button\').eq(0).click(function() {
$(\'div\').show(1000,\'linear\',alert(\'hello world!\'));
});
$(\'button\').eq(1).click(function() {
$(\'div\').hide(1000,\'linear\',console.log(\'hello\'));
});
$(\'button\').eq(2).click(function() {
$(\'div\').toggle(1000,\'linear\',alert(\'hello world!\'));
});
</script>
</body>
滑动显示
一、滑动显示slideDown()
slideDown() 方法以滑动方式显示被选元素。
注意：slideDown() 适用于通过 jQuery 方法隐藏的元素，或在 CSS 中声明 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
语法
$(selector).slideDown(speed,easing,callback)
二、滑动隐藏slideUp()
slideUp() 方法以滑动方式隐藏被选元素。
注意：隐藏的元素不会被完全显示（不再影响页面的布局）。
语法
$(selector).slideUp(speed,easing,callback)
三、切换slideToggle()
slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。
语法
$(selector).slideToggle(speed,easing,callback)
这三个方法和基本显示的三个方法的参数及效果一模一样
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(\'button\').eq(0).click(function() {
$(\'div\').slideDown();
});
$(\'button\').eq(1).click(function() {
$(\'div\').slideUp();
});
$(\'button\').eq(2).click(function() {
$(\'div\').slideToggle();
});
</script>
</body>
hover的复合写法
一、两个参数
第一个参数为鼠标经过时的方法，第二个参数为鼠标离开时的方法。
<script>
$(function() {
$(\'.nav-items>a\').hover(function(){
$(this).next().slideDown();
}, function(){
$(this).next().slideUp();
})
});
</script>
二、一个参数
该参数为鼠标经过和离开时执行的同一个方法。
<script>
$(function() {
$(\'.nav-items>a\').hover(function(){
$(this).next().slideToggle();
});
});
</script>
动画队列
动画及队列效果
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
停止排队
语法
stop()
（1）stop()方法用于停止动画或效果
（2）注意：stop()写到动画或者效果的前面，用于停止结束上一次的动画3
淡入淡出显示
一、淡入显示fadeIn
fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）。
提示：该方法通常与 fadeOut() 方法一起使用。
语法：
$(selector).fadeIn(speed,easing,callback)
二、淡出显示fadeOut()
fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）。
提示：该方法通常与 fadeIn() 方法一起使用。
语法
$(selector).fadeOut(speed,easing,callback)
三、淡入淡出切换fadeToggle()
fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。
语法
$(selector).fadeTo(speed,opacity,easing,callback)
| 变量 | 描述 |
|---|---|
| opacity | 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。 |
四、透明度至fadeTo()
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）。
语法
$(selector).fadeToggle(speed,easing,callback)
自定义动画animate
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
语法
(selector).animate({styles},speed,easing,callback)
| 参数 | 描述 |
|---|---|
| styles | 必需。规定产生动画效果的一个或多个 CSS 属性/值。注意： 当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。 可以应用动画的属性： backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 提示：颜色动画不包含在核心 jQuery 库中。如果您想要应用动画颜色，您需要从 jQuery.com 下载 颜色动画插件。 |
注意，参数必须以对象传递
例如以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Document</title>
<style>
div {
position: absolute;
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>按钮</button>
<div></div>
<script>
$(\'button\').click(function() {
$(\'div\').animate({
top: 400,
left: 400,
height: 400,
width: 400
});
});
</script>
</body>
</html>
以上是关于jQuery效果的主要内容，如果未能解决你的问题，请参考以下文章