jquery-waypoints 相关问题

Waypoints是一个库，只要用户滚动到页面上的特定点，就可以执行代码。

我正在创建一个无限水平提要，我想在元素水平进入视口时为其设置动画。我正在为此尝试 waypoint.js 。 JS小提琴我正在创建一个无限水平提要，我想在元素水平进入视口时为其设置动画。我正在为此尝试 waypoint.js。 JS 小提琴 <div id="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> 向 div 添加 .show ，这会将 div 的不透明度从 0 更改为 1。 $(function() { $(".item").each(function(){ $(this).waypoint(function() { $(this).addClass('show'); }, { offset: '100%', horizontal: true }); }); }); CSS .item { width:500px; height:250px; background:red; color:#fff; display:inline-block; opacity:.2; } .item.show { opacity:1; } 但是现在，当元素水平进入视口时，它们的不透明度不会从 0 更改为 1。知道为什么吗？抱歉，我对 javascript 和 waypoint 还很陌生。 100%宽度不正确；如果将其更改为 500px（单个项目的指定宽度），它将起作用。但这不是最佳选择（每当您更改任何内容时，您都需要更新 JS 和 CSS）：更好的方法可能是通过 JS 获取项目的宽度，并使用该值作为偏移量。传递给 offset 的百分比值是视口的百分比，我认为这不是您想要的，而偏移量应该是〜每个项目的宽度。目前，任何项目（即使部分位于视口内）都是不透明的，因此您永远看不到任何变化。参见 http://imakewebthings.com/waypoints/api/offset-option/ 航点处理程序中的 this 不是元素，而是 Waypoint 实例。您想使用$(this.element).addClass('show') JsFiddle 演示代码中的问题在于，在 waypoint 回调函数中，$(this) 指的是 Waypoint 对象，而不是原始的 DOM 元素。要解决此问题，您应该将原始 DOM 元素的引用存储在路径点回调之外 $(function() { $(".item").each(function() { var $this = $(this); // Store the reference to the original DOM element $this.waypoint(function() { $this.addClass('show'); // Use the stored reference here }, { offset: '100%', horizontal: true }); }); }); .item { width: 500px; height: 250px; background: red; color: #fff; display: inline-block; opacity: 0.2; transition: opacity 0.5s ease; /* Add a transition for a smoother effect */ } .item.show { opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script> <div id="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>

javascript jquery jquery-waypoints

回答 3 投票 0

在滚动中使用 animate.css 4.x [关闭]

我正在努力更新以使用 animate.css 4.x。如何在窗口的某个点滚动时触发动画，类似于 Waypoints 为 animate.css 3.x 所做的？谢谢！

jquery-waypoints animate.css

回答 0 投票 0

Waypoints.js 与 wordpress

我正在开发一个 wordpress 网站，我需要触发用户滚动以触发不同的事件并隐藏/显示一些图像，因此 Waypoints.js 非常适合它。但是我尝试了不同的

php wordpress jquery-waypoints

回答 2 投票 0

Waypoint 未调用部分

我目前正在使用 jQuery waypoint 试图在一个部分触发一个 waypoint，但是，它不起作用。不确定这是由于本地主机还是什么。我目前的代码是 $('.howDoesItWork').waypo...