1

如果您希望查看存在问题的工作站点，请参阅凭据部分（我正在为蓝色块“#star”下方的内容制作动画）：

http://176.32.230.17/apptivation.co.uk/m/home/

我有两个插件

  1. :onscreen当目标 DIV 在视口上可见时播放动画
  2. 全屏翻页，在章节之间制作类似书的效果

插件二希望在一页上具有以下部分结构才能使其工作：

<div class="bb-item">
<div class="content">
    <div class="scroller">
                    <!-- this is the div i want to animate -->
        <div id="star" class="inner-pad">
            some content
        </div>
    </div>
</div>
</div>

我像这样初始化屏幕插件：

$(function() {
 setInterval(function() {
    $("#star").filter(":onScreen").addClass('animated bounceInRight');
 }, 0)                             
})

如果上面的代码是第一部分，我的 '#star' div 将按照屏幕上（插件 1）的预期方式成功添加类名。但是，如果我将该代码移动到第五部分（例如），屏幕上会在我到达（可见）该部分之前添加类名。这就是我认为插件 2 影响插件 1 的地方，使插件 1 认为 div 实际上是可见的，而实际上它不可见。

我如何确保屏幕上的插件完成它的工作并且只在我只在特定部分时添加类名？

在初始化屏幕插件之前，我尝试删除类名“动画bounceInRight”，但这没有用。在这个脚本文件（插件 2）中，它会破坏一些元素并在翻页开始时重新初始化，我可以在屏幕上做同样的事情吗？我该怎么做？

4

1 回答 1

0

大多数 jQuery 插件将其对象的新实例存储在 jQuery 数据中。我认为皇家滑块代码达到了顶峰 - http://dimsemenov.com/plugins/royal-slider/ - 我认为你可以通过直接引用royalSlider对象来破坏它。

首先，您要检查并查看您尝试调用destroy 的元素是否实际上具有royalSlider 实例。

看到这个页面

于 2019-08-20T09:28:09.363 回答