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

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

news 2026/2/9 16:31:00

当网站页面元素进入视口时自动应用过渡效果。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

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...

编程新知 2025/12/1 19:23:04

汽车生产虚拟实训中的技能提升与生产优化

在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

Web 架构之 CDN 加速原理与落地实践

文章目录一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/2/8 21:57:46

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...

编程新知 2025/12/18 8:35:12

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...

编程新知 2026/2/6 2:13:58

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录腾讯[实习]科恩实验室-安全工程师一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制二…...

编程新知 2026/1/27 2:41:27

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介在我的 QT/C 开发工作中，合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式：工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22

一、官网

二、不同版本的使用

三、问题

相关文章：