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

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

news 2026/4/10 13:03:25

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

【数据库系统】数据库系统概论——第十一章并发控制

第十一章并发控制文章目录第十一章并发控制前言 11.1并发控制概述 11.2封锁 11.3封锁协议 11.4活锁和死锁 11.4.1活锁 11.4.2死锁 11.5并发调度的可串行性 11.5.1可串行化调度 11.5.2冲突可串行化调度 11.6两段锁协议 11.7封锁的粒度 11.7.1多粒度封锁 11.7.2意向锁 11.8其…...

编程新知 2026/4/10 12:59:54

峰岹 FU6866 高频注入学习

前言在上一篇博客中对高频注入有了大致了解，其实了解的也不是很深入，感觉现在都没有映像。实操一下，不会再回头看看。资料后续我会把博客中用到的资料放在百度网盘中。提取码: pmr3。硬件见网盘中的硬件设计，我也是按里…...

编程新知 2026/4/10 12:03:45

瑜伽博主必备！雯雯的后宫-造相Z-Image-瑜伽女孩生成小红书封面图教程

瑜伽博主必备！雯雯的后宫-造相Z-Image-瑜伽女孩生成小红书封面图教程 1. 为什么选择这个瑜伽女孩生成工具？ 作为一名瑜伽博主或内容创作者，你是否经常遇到这些困扰： 找不到符合瑜伽主题的高质量配图商用图库价格昂贵且风格单一…...

编程新知 2026/4/10 10:35:05

Ostrakon-VL-8B快速部署指南：Docker封装+端口映射，小白也能轻松搭建视觉理解系统

Ostrakon-VL-8B快速部署指南：Docker封装端口映射，小白也能轻松搭建视觉理解系统 1. 为什么选择Docker部署Ostrakon-VL-8B？ 在开始具体操作之前，我们先聊聊为什么推荐用Docker来部署这个模型。Ostrakon-VL-8B虽然功能强大&#x…...

编程新知 2026/4/10 9:51:15

免费下载Steam创意工坊模组的终极方案：WorkshopDL完全指南

免费下载Steam创意工坊模组的终极方案：WorkshopDL完全指南【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 在游戏模组的世界里，Steam创意工坊无疑是最大…...

编程新知 2026/4/10 9:42:49

从镜像到应用：Qwen3-0.6B-FP8+Chainlit完整搭建流程解析

从镜像到应用：Qwen3-0.6B-FP8Chainlit完整搭建流程解析 1. 环境准备与镜像部署 1.1 镜像选择与特点 Qwen3-0.6B-FP8是一个基于vLLM框架部署的轻量级文本生成模型镜像，特别适合需要快速搭建AI服务的开发者。这个镜像的主要特点包括： 高效推…...

编程新知 2026/4/10 8:19:38

Anthropic发布史上最强模型：Claude Mythos Preview，但遭禁用

“太危险不能发布”这句话，AI 行业七年前就说过一次。是2019 年 2 月，OpenAI 发了一个叫 GPT-2 的语言模型。当时OpenAI给出的理由是担心被用来大规模生成虚假信息，所以只放出了一个缩水版。七年过去，Anthropic把这句话又说了一遍…...

编程新知 2026/4/10 7:16:30

Java与C++：7大核心差异全解析

好的，Java 和 C 都是广泛使用的面向对象编程语言，但它们在设计哲学、特性和应用场景上存在显著区别。以下是它们的主要差异：1. 内存管理C：支持手动内存管理（通过 new/delete 操作符）。程序员需自行分配和释…...

编程新知 2026/4/10 7:12:25

OpenClaw任务调度：Qwen3-14b_int4_awq优先级管理策略

OpenClaw任务调度：Qwen3-14b_int4_awq优先级管理策略 1. 为什么需要优先级管理上周我在本地部署了OpenClaw对接Qwen3-14b_int4_awq模型，准备用它来处理日常的文档整理和代码生成任务。但很快发现一个问题：当我同时提交多个任务时&#xff…...

编程新知 2026/4/10 6:39:45

Lychee-Rerank在软件测试报告分析中的应用：自动归类与优先级排序

Lychee-Rerank在软件测试报告分析中的应用：自动归类与优先级排序你是不是也遇到过这种情况？每天跑完自动化测试，面对成百上千条失败用例的日志，感觉头都大了。一条条看过去，眼睛都花了，结果发现很多失败的…...

编程新知 2026/4/10 6:03:13

一、官网

二、不同版本的使用

三、问题

相关文章：