目录
动画效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义(了解即可)
animate(p,[s],[e],[fn])
AI的解释
- 基本显示/隐藏
show([speed],[easing],[function])
: 显示元素。speed
指定动画的持续时间,easing
是动画的缓动函数,function
是动画完成后的回调函数。hide([speed],[easing],[function])
: 隐藏元素,参数同show
。toggle([speed],[easing],[function])
: 切换元素的显示状态,参数同show
。
- 滑动效果
slideDown([speed],[easing],[function])
: 以滑动方式显示元素,参数同show
。slideUp([speed],[easing],[function])
: 以滑动方式隐藏元素,参数同show
。slideToggle([speed],[easing],[function])
: 切换元素的滑动显示状态,参数同show
。
- 淡入淡出效果
fadeIn([speed],[easing],[function])
: 以淡入方式显示元素,参数同show
。fadeOut([speed],[easing],[function])
: 以淡出方式隐藏元素,参数同show
。fadeTo([speed],opacity,[easing],[function])
: 将元素的不透明度动画化到指定值,opacity
是目标不透明度。fadeToggle([speed],[easing],[function])
: 切换元素的淡入/淡出状态,参数同show
。
- 自定义动画
animate(properties,[speed],[easing],[function])
: 创建自定义动画。properties
是一个对象,包含要动画化的 CSS 属性和值。其他参数同show
。
这里提供几个例子
$("div").show(1000);//一秒内缓慢显示出div标签
$("div").hide(1000);//一秒内缓慢隐藏div标签
$("div").slideDown(1000)//一秒内缓慢从上到下显示该div标签
$("div").slideUp(1000)//一秒内缓慢从下到上隐藏div标签
each
描述:一个通用的迭代函数,可以无缝迭代对象和数组。
格式如下:
$.each(array, function(index, value) {
// 代码块
});
array
:要遍历的数组或类数组对象。index
:当前元素的索引。value
:当前元素的值。- 在回调函数中,
this
关键字指向当前元素的值.。
例子如下
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引,v是索引对应的数字
})
结果如图
.each
.each()
方法是遍历一个jQuery对象,为每个匹配元素执行一个函数。
.each()
方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行
基本格式:
$(selector).each(function(index, element) {
// 代码块
});
$(selector)
:这个选择器选中一组 DOM 元素。.each(function(index, element) { ... })
:对于选择器选中的每个元素,执行回调函数。index
:当前元素的索引(从 0 开始计数)。element
:当前元素。在函数内部,你也可以使用this
来引用当前元素。
例子如下
$("div").each(function(){
console.log(this)
})//这会将所有div标签打印出来
结果如图
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
首先这个方法即可以查看标签内的数据,也可以给标签内添加数据
例子如图
标签:function,动画,22,show,元素,2024,each,easing,speed From: https://www.cnblogs.com/lzyzjb/p/17981597