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

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

news 2026/1/26 21:17:53

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

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2026/1/26 6:48:29

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统题目开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...

编程新知 2026/1/26 18:16:36

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下：隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍软件包管理工具dpkg dpkg核心指令详解安装软件包卸载软件包查询软件包状态验证软件包完整性手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核的 Linux 发行版&#xff…...

编程新知 2026/1/26 11:40:27

centos 7 部署awstats 网站访问检测

一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/23 8:33:56

VTK如何让部分单位不可见

最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...

编程新知 2025/12/12 4:55:21

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample（样本数） 表示测试中发送的请求数量，即测试执行了多少次请求。单位，以个或者次数表示。示例：…...

编程新知 2025/12/18 6:00:45

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...

编程新知 2026/1/17 15:37:22

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...

编程新知 2026/1/20 23:05:20

一、官网

二、不同版本的使用

三、问题

相关文章：