首页 > 其他分享 >2024-1-22动画效果和部分方法

2024-1-22动画效果和部分方法

时间:2024-01-23 09:12:25浏览次数:23  
标签:function 动画 22 show 元素 2024 each easing speed

目录

动画效果

// 基本
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的解释

  1. 基本显示/隐藏
    • show([speed],[easing],[function]): 显示元素。speed 指定动画的持续时间,easing 是动画的缓动函数,function 是动画完成后的回调函数。
    • hide([speed],[easing],[function]): 隐藏元素,参数同 show
    • toggle([speed],[easing],[function]): 切换元素的显示状态,参数同 show
  2. 滑动效果
    • slideDown([speed],[easing],[function]): 以滑动方式显示元素,参数同 show
    • slideUp([speed],[easing],[function]): 以滑动方式隐藏元素,参数同 show
    • slideToggle([speed],[easing],[function]): 切换元素的滑动显示状态,参数同 show
  3. 淡入淡出效果
    • fadeIn([speed],[easing],[function]): 以淡入方式显示元素,参数同 show
    • fadeOut([speed],[easing],[function]): 以淡出方式隐藏元素,参数同 show
    • fadeTo([speed],opacity,[easing],[function]): 将元素的不透明度动画化到指定值,opacity 是目标不透明度。
    • fadeToggle([speed],[easing],[function]): 切换元素的淡入/淡出状态,参数同 show
  4. 自定义动画
    • 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

相关文章

  • 2024年可能会用到的几个地图可视化模板
    前言在数字化的过程中,数据可视化变得越来越重要。用户喜欢通过酷炫的视觉效果和直观的数据展示来理解数据。可视化地图组件是数据可视化的重要组成部分。这些地图组件提供多样化的效果,能够更好地展示数据的关系和地理分布,直观地将数据与各个区域进行关联。它们不仅有效而美观地呈......
  • 【2024.01.23】搭建幻兽帕鲁palworld私人服务器,并配置难度
    使用docker进行部署无疑是最快的项目地址:https://github.com/thijsvanloef/palworld-server-docker代码内容services:palworld:image:thijsvanloef/palworld-server-docker:latestrestart:unless-stoppedcontainer_name:palworld-serverpo......
  • Go 语言中高效切片拼接和 GO 1.22 提供的新方法
    linux模拟资源占用你会吗点击关注......
  • How to install Clang 17 or 18 in Ubuntu 22.04 20.04
    HowtoinstallClang17or18inUbuntu22.04|20.04ThissimpletutorialshowshowtoinstallthelatestClangcompiler17and/or18inUbuntu20.04,Ubuntu22.04,andUbuntu23.10.UbuntuincludesseveralversionsofClanginitssystemrepositories.B......
  • https://github.com/runze1223/VH-NBEATS 时序数据NBEATS
    https://github.com/runze1223/VH-NBEATS http://ise.thss.tsinghua.edu.cn/~mlong/doc/TimesNet-iclr23.pdf  https://www.xjx100.cn/news/6779.html  https://blog.csdn.net/qq_59482564/article/details/134912580 https://blog.csdn.net/qq_59482564/arti......
  • 2024.1.22
    1.Throwable类方法(1)publicStringgetMessage()返回发生的异常的详细信息(2)publicThrowablegetCause()返回一个Throwable对象代表异常原因(3)publicStringtoString()返回此Throwable的简短描述(4)publicvoidprintStackTrace()将此Throwable及其回溯打印到标准错......
  • Inplementation of Binary Search Tree【1月22日学习笔记】
    点击查看代码//InplementationofBinarySearchTree#include<iostream>usingnamespacestd;structbstnode{ intdata; bstnode*left; bstnode*right;};/*bstnode*root=NULL;*//*root=NULL;wrong*//*全局范围内的变量的初始化必须在声......
  • 2024 蓝桥杯模拟赛 1 (div1) 题解
    A.把字符串小写转换成大写即可#include<bits/stdc++.h>usingnamespacestd;voidsolve(){strings;cin>>s;for(inti=0;i<s.size();i++){if(s[i]>='a'&&s[i]<='z'){s[i]=(char)(s[i]-'a......
  • 2024 省选联测部分题解
    目录目录R15T1树V图R15T2矩阵缺失题目:R15T3.R15T1树V图原题:SNOI2024D1T1.注意到答案肯定是形如每个连通块选一个点组成,把连通块缩起来后令\(dp_{u,x}\)表示连通块\(u\)选\(x\)的方案数,每次合并子树转移即可.因为只有\(n^2\)个合法点对所以时间复杂度......
  • 2024新版Windows 11要来了!16GB内存需求引热议 只是推荐配置
    最近,TrendForce集邦咨询的一份报告指出,微软已经将AIPC的内存基线设置为16GB。有媒体表示,这也意味着,新版Windows11的AI功能需要至少16GB内存才能运行。消息曝光后引发热议。对此,WC报道称,微软尚未就上述内存需求发表官方评论。16GB内存很可能只是微软的推荐配置,而非最低配置要求......