当前位置：首页 > news >正文

解决视口动画插件jquery.aniview.js使用animate.css时无效的问题（最新版本网页视口动画插件的使用及没作用、没反应）

news 2025/11/23 11:38:22

当网站页面元素进入视口时自动应用过渡效果。CSS过渡效果可以为网页添加动画效果，并提供了一种平滑的转换方式，使元素的变化更加流畅和生动。而通过jQuery插件来获取页面滚动位置决定合适调用动画效果。

一、官网

animate.css官网
一款强大的预设css3动画库，也是实现视口动画功能的核心，各种动作名称都从此链接内找。
以下为部分动画对应的中文。

fade: {title: '淡入淡出',fadeIn: '淡入',fadeInDown: '向下淡入',fadeInDownBig: '向下快速淡入',fadeInLeft: '向右淡入',fadeInLeftBig: '向右快速淡入',fadeInRight: '向左淡入',fadeInRightBig: '向左快速淡入',fadeInUp: '向上淡入',fadeInUpBig: '向上快速淡入',fadeOut: '淡出',fadeOutDown: '向下淡出',fadeOutDownBig: '向下快速淡出',fadeOutLeft: '向左淡出',fadeOutLeftBig: '向左快速淡出',adeOutRight: '向右淡出',fadeOutRightBig: '向右快速淡出',fadeOutUp: '向上淡出',fadeOutUpBig: '向上快速淡出'
},
bounce: {title: '弹跳类',bounceIn: '弹跳进入',bounceInDown: '向下弹跳进入',bounceInLeft: '向右弹跳进入',bounceInRight: '向左弹跳进入',bounceInUp: '向上弹跳进入',bounceOut: '弹跳退出',bounceOutDown: '向下弹跳退出',bounceOutLeft: '向左弹跳退出',bounceOutRight: '向右弹跳退出',bounceOutUp: '向上弹跳退出'
},
zoom: {title: '缩放类',zoomIn: '放大进入',zoomInDown: '向下放大进入',zoomInLeft: '向右放大进入',zoomInRight: '向左放大进入',zoomInUp: '向上放大进入',zoomOut: '缩小退出',zoomOutDown: '向下缩小退出',zoomOutLeft: '向左缩小退出',zoomOutRight: '向右缩小退出',zoomOutUp: '向上缩小退出'
},
rotate: {title: '旋转类',rotateIn: '顺时针旋转进入',rotateInDownLeft: '从左往下旋入',rotateInDownRight: '从右往下旋入',rotateInUpLeft: '从左往上旋入',rotateInUpRight: '从右往上旋入',rotateOut: '顺时针旋转退出',rotateOutDownLeft: '向左下旋出',rotateOutDownRight: '向右下旋出',rotateOutUpLeft: '向左上旋出',rotateOutUpRight: '向右上旋出'
},
flip: {title: '翻转类',flipInX: '水平翻转进入',flipInY: '垂直翻转进入',flipOutX: '水平翻转退出',flipOutY: '垂直翻转退出'
},
strong: {title: '强调类',bounce: '弹跳',flash: '闪烁',pulse: '脉冲',rubberBand: '橡皮筋',shake: '左右弱晃动',swing: '上下摆动',tada: '缩放摆动',wobble: '左右强晃动',jello: '拉伸抖动'
}

jquery.aniview.js官网
实现页面滚动元素进入视口发生动画的插件，该插件使用基于animate.css和jQuery，jQuery的版本不限。

Option	Type	Description	Default
animateClass	string	the animate.css class to use: ‘animated’ enables v3.x support and ‘animate__animated’ to enable v4.x support	animated
animateThreshold（阈值）	int	+ve numbers delay the animation sequence until the specified number of pixels have come into view. -ve numbers will trigger the animation sequence prior to the element coming into view.	0
scrollPollInterval	int	The frequency at which user scrolling is ‘polled’ i.e. tested. This is in milliseconds (ms) and is an extension to jQuery’s in-built ‘scroll’ event/handler.	20

animateClass：这个的用法需要考虑自己引得是 v3版本的animate.css 还是v4版本的
animateThreshold：简单的的说，值是正的，就当元素进入视口后再触发；值是负的，就当元素进入视口前触发。
注：
当用户加载页面时，任何已经在视口中的元素都将立即触发它的动画（如果已设置）。
换句话说，在这些元素上启动动画之前，它不会等待用户开始滚动。

二、不同版本的使用

版本V3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="resource/js/jquery-3.7.1.min.js"></script>
<link href="resource/css/animate/v3/animate.min.3.5.0.css" rel="stylesheet">
<script type="text/javascript" src="resource/js/aniview/v3/jquery.aniview.js"></script>
</head>
<body>
<div class="aniview" av-animation="fadeInRight">v3</div>
</body>
<script type="text/javascript">
var options = {animateThreshold: 100,scrollPollInterval: 20
}
jQuery('.aniview').AniView(options);
</script>
</html>

版本V4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="resource/js/jquery-3.7.1.min.js"></script>
<link href="resource/css/animate/v4/animate.min.4.1.1.css" rel="stylesheet">
<script type="text/javascript" src="resource/js/aniview/v4/jquery.aniview.js"></script>
</head>
<body>
<div class="aniview animate__animated animate__fadeInRight">v4</div>
</body>
<script type="text/javascript">
var options = {animateThreshold: 100,scrollPollInterval: 20
}
jQuery('.aniview').AniView(options);
</script>
</html>

三、问题

换V4以后无效，首先注意排除代码是否正确书写。

V3动作在属性av-animation里写，V4则写在class里，且增加了animate__animated等变化。

自打版本V3.6.2及以后，动画是否显示归系统管理，设置参考下图：
所以为了“避免”用户看不到动画，还是用老版本吧，现在官方能下载到最新的防屏蔽版本是V3.5.1，都在下面的包里。
《视口动画插件版本合集（包括jQuery、jquery.aniview.js、animate.css）》

参考：
视口动画Animate.css和 jquery-aniview详细使用
jquery插件页面滚动元素进入视口触发动画jquery-aniview
【踩坑笔记】animate.css无效【非版本问题】
Vue------关于 Vue 引用 animate.css 动画不起作用的问题（animate.css）

在这里插入图片描述

解决视口动画插件jquery.aniview.js使用animate.css时无效的问题（最新版本网页视口动画插件的使用及没作用、没反应）

当网站页面元素进入视口时自动应用过渡效果。CSS过渡效果可以为网页添加动画效果，并提供了一种平滑的转换方式，使元素的变化更加流畅和生动。而通过jQuery插件来获取页面滚动位置决定合适调用动画效果。一、官网 animate.css官网一款强大的预设css3动…...

编程日记 2023/11/27 9:53:21

【挑战业余一周拿证】一、亚马逊云科技简介 - 第 3 节 - 云计算

第 3 节 - 云计算在深入了解亚马逊云科技的各个部分之前，让我们先缩小视野，对云进行一个合理的定义。云计算就是通过互联网按需提供 IT 资源并采用按需付费定价模式，下面，我们将进行详细说明。按需提供表示的是亚马逊云科技会在…...

编程日记 2023/11/27 9:52:20

4. 无向图的各连通分支

题目求解无向图的各连通分支输入： 第一行为图的节点数n（节点编号0至n-1，0<n<10） 从第二行开始列出图的边，-1表示输入结束输出： 输出每个连通分支的广度优先搜索序列（从连通分支的最…...

编程日记 2023/11/27 9:51:19

《golang设计模式》第三部分·行为型模式-08-状态模式（State）

文章目录 1. 概念1.1 作用1.1 角色1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 类图 1. 概念 1.1 作用状态（State）指状态对象，用于封装上下文对象的特定状态行为，使得上下文对象在内部状态改变时能够改变其自身的行为。 1.1 角色…...

编程日记 2023/11/27 9:50:17

tp8 使用rabbitMQ（3）发布／订阅

发布/订阅当我们想把一个消息，发送给多个消费者的时候，我们把这种模式叫做发布/订阅模式，比如我们做两个消费者，其中一个消费者把消息写入磁盘中，别一个消费者把消息结果输出到屏幕上，就要用到发布订阅模…...

编程日记 2023/11/27 9:49:16

【nlp】3.4 Transformer论文复现：2. 编码器部分（规范化层、子层连接结构、编码器层）

3.4 Transformer论文复现：2. 编码器部分（规范化层、子层连接结构、编码器层） 2.6 规范化层2.6.1 规范化层的作用2.6.2 规范化层的代码实现2.6.3 规范化层总结2.7 子层连接结构2.7.1 子层连接结构2.7.2 子层连接结构的代码实现2.7.3 子层连接结构总结2.8 编码器层2.8.1 编码器…...

编程日记 2023/11/27 9:48:15

面试：ShardingSphere问题

文章目录什么是ShardingSphere，它的主要功能是什么？ShardingSphere的核心模块有哪些？他们是如何工作的？ShardingSphere 的读写分离是如何实现的？如何配置ShardingSphere的数据分片策略？ShardingSphere支持…...

编程日记 2023/11/27 9:47:13

NX二次开发UF_CURVE_ask_offset_direction_2 函数介绍

文章作者：里海来源网站：https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_offset_direction_2 Defined in: uf_curve.h int UF_CURVE_ask_offset_direction_2(UF_STRING_p_t input_curves, double offset_direction_vector [ 3 ] , double dra…...

编程日记 2023/11/27 9:46:11

【研究中】sql server权限用户设置23.11.26

--更新时间2023.11.26 21：30 负责人：jerrysuse DBAliCMSIF EXISTS (select * from sysobjects where namehkcms_user)--判断是否存在此表DROP TABLE hkcms_user CREATE TABLE hkcms_user (id int primary key identity(1, 1),username char(32) NOT N…...

编程日记 2023/11/27 9:45:11

java多线程一

1、什么是线程线程（Thread）是一条程序内部的一条执行流程。程序中如果只有一条执行流程，那这个程序就是单线程的程序。 2、什么是多线程多线程（multithreading），是指从软件或者硬件上实现多个线程并发执…...

编程日记 2023/11/27 9:44:10

电脑技巧：电脑常见蓝屏、上不了网等故障及解决办法

目录一、电脑蓝屏常见原因1: 病毒木马常见原因2: 安装了不兼容的软件二、电脑不能上网常见原因1: 新装系统无驱动常见原因2: DNS服务器异常常见原因3: 硬件问题三、电脑没声音常见原因1: 未安装驱动常见原因2: 硬件故障四、电脑屏幕不显示常见原因1: 显…...

编程日记 2023/11/27 9:43:09

大语言模型损失函数详解

我们可以把语言模型分为两类： 自动回归式语言模型：自动回归式语言模型在本质上是单向的，也就是说，它只沿着一个方向阅读句子。正向（从左到右）预测；反向（从右到左）预测。…...

编程日记 2023/11/27 9:42:08

Spring Boot 3 集成 Knife4j

基础环境 SpringBoot : 3.0.6 Java: jdk-17.0.5 Maven: 3.6.1依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xs…...

编程日记 2023/11/27 9:41:07

BetaFlight模块设计之三十六：SoftSerial

BetaFlight模块设计之三十六：SoftSerial 1. 源由2. API接口2.1 openSoftSerial2.2 onSerialRxPinChange2.3 onSerialTimerOverflow2.4 processTxState2.5 processRxState 3. 辅助函数3.1 applyChangedBits3.2 extractAndStoreRxByte3.3 prepareForNextRxByte 4. 总结…...

编程日记 2023/11/27 9:40:06

PC访问华为昇腾开发板的摸索过程

作者：朱金灿来源：clever101的专栏为什么大多数人学不会人工智能编程？>>> 最近要折腾华为昇腾开发板（官方名称叫：Atlas 200I DK）。先是按照官方教程折腾：Atlas200DK环境部署。我发现…...

编程日记 2023/11/27 9:39:06

C++学习之路（六）C++ 实现简单的工具箱系统命令行应用 - 示例代码拆分讲解

简单的工具箱系统示例介绍: 这个示例展示了一个简单的工具箱框架，它涉及了几个关键概念和知识点： 面向对象编程 (OOP)：使用了类和继承的概念。Tool 是一个纯虚类，CalculatorTool 和 FileReaderTool 是其派生类。多态&#xff1…...

编程日记 2023/11/27 9:38:05

redis运维(十四) hash缓存案例

一缓存案例 ① 需求 ② 个人理解策略：不更新缓存，而是删除缓存大部分观点认为：1、做缓存不应该是去更新缓存,而是应该删除缓存2、然后由下个请求去缓存,发现不存在后再读取数据库,写入redis缓存高并发场景下,到底先更新缓存还是先更…...

编程日记 2023/11/27 9:37:04

Rust UI开发（三）：iced如何打开图片（对话框）并在窗口显示图片？

注：此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库，用于为rust语言程序构建UI界面。这是一个系列博文，本文是第三篇，前两篇的链接： 1、Rust UI开发（一）：使用iced构建…...

编程日记 2023/11/27 9:36:03

网络爬虫（Python：Requests、Beautiful Soup笔记）

网络爬虫（Python：Requests、Beautiful Soup笔记） 网络协议简要介绍一。OSI参考模型二、TCP/IP参考模型对应关系TCP/IP各层实现的协议应用层传输层网络层 HTTP协议HTTP请求HTTP响应HTTP状态码 Requests（Python）Requests…...

编程日记 2023/11/27 9:35:02

【Kotlin】内联函数

文章目录内联函数noinline: 避免参数被内联非局部返回使用标签实现Lambda非局部返回为什么要设计noinline crossinline具体化参数类型 Kotlin中的内联函数之所以被设计出来，主要是为了优化Kotlin支持Lambda表达式之后所带来的开销。然而，在Java中我们似…...

编程日记 2023/11/27 9:33:00

微信小程序之bind和catch

这两个呢，都是绑定事件用的，具体使用有些小区别。官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...

编程新知 2025/11/21 20:45:17

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2025/11/16 21:46:46

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...

编程新知 2025/11/21 7:50:15

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/9/25 14:10:40

管理学院权限管理系统开发总结

文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...

编程新知 2025/10/23 14:10:35

【生成模型】视频生成论文调研

工作清单上游应用方向：控制、速度、时长、高动态、多主体驱动类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/11/18 8:05:07

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2025/11/16 22:42:57

给网站添加live2d看板娘

给网站添加live2d看板娘参考文献： stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言网站环境如下，文章也主…...

编程新知 2025/11/21 5:28:55

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/8/31 18:02:53

一、官网

二、不同版本的使用

三、问题

相关文章：