jquery-animate 相关问题

为此 JQuery animate(scrollLeft) 函数获取等效的原生 JavaScript？

我正在为本机（香草）JavaScript 寻找以下 jQuery animate() 函数： $(文档).ready(函数(){ $('#btn-菜单-导航-</desc> <question vote="0"> <p>我正在为本机（香草）JavaScript 寻找以下 jQuery <pre><code>animate()</code></pre> 函数：</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; $(document).ready( function() { $(&#39;#btn-menu-nav-previous&#39;).click(function() { $(&#34;.menu-inner-box&#34;).animate({scrollLeft: &#34;-=100px&#34;}); }); $(&#39;#btn-menu-nav-next&#39;).click(function() { $(&#34;.menu-inner-box&#34;).animate({scrollLeft: &#34;+=100px&#34;}); }); }); &lt;/script&gt; </code></pre> <p>此代码通常允许在单击 <strong>next</strong> 和 <strong>previous</strong> 时对菜单列表进行分页。</p> <p>但是我在不使用 JQuery 的情况下在纯 JS 中搜索它的等价物。</p> <p>这是我所做的：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener(&#34;DOMContentLoaded&#34;, function() { var menu = document.querySelector(&#34;.menu-inner-box&#34;); var prev = document.getElementById(&#34;btn-menu-nav-previous&#34;); var next = document.getElementById(&#34;btn-menu-nav-next&#34;); prev.addEventListener(&#34;click&#34;, function() { menu.animate([{ scrollLeft: menu.scrollLeft }, { scrollLeft: menu.scrollLeft - 100 }], { duration: 500, fill: &#34;forwards&#34; }); }); next.addEventListener(&#34;click&#34;, function() { menu.animate([{ scrollLeft: menu.scrollLeft }, { scrollLeft: menu.scrollLeft + 100 }], { duration: 500, fill: &#34;forwards&#34; }); }); });</code></pre> <pre><code>nav#menu-container { background: #586e75; position: relative; width: 50%; height: 56px; } #btn-menu-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } #btn-menu-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } .menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; } .menu { padding: 0; margin: 0; list-style-type: none; display: block; text-align: center; } .menu-item { height: 100%; padding: 0px 25px; color: #fff; display: inline; margin: 0 auto; line-height: 57px; text-decoration: none; text-align: center; white-space: no-wrap; } .menu-item:hover { text-decoration: underline; } .last-item { margin-right: 50px; }</code></pre> <pre><code>&lt;nav id=&#34;menu-container&#34; class=&#34;arrow&#34;&gt; &lt;div id=&#34;btn-menu-nav-previous&#34; style=&#34;fill: #FFF&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div id=&#34;btn-menu-nav-next&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div class=&#34;menu-inner-box&#34;&gt; &lt;div class=&#34;menu&#34;&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 1&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 2&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 3&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 4&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 5&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 6&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 7&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 8&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 9&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 10&lt;/a&gt; &lt;a class=&#34;menu-item last-item&#34; href=&#34;#&#34;&gt;Menu 11&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt;</code></pre> </div> </div> <p></p> <p>但是根本不管用</p> <p>任何人都可以给我任何帮助吗？？？</p> </question> <answer tick="false" vote="0"> <p>这是我所做的：</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;meta charset=&#34;utf-8&#34;&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt; &lt;title&gt;Menu&lt;/title&gt; &lt;style&gt; nav#menu-container { background:#586e75; position:relative; width:50%; height: 56px; } #btn-menu-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill:#FFF; } #btn-menu-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill:#FFF; } .menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; } .menu { padding:0; margin: 0; list-style-type: none; display:block; text-align: center; } .menu-item { height:100%; padding: 0px 25px; color:#fff; display:inline; margin:0 auto; line-height:57px; text-decoration:none; text-align:center; white-space:no-wrap; } .menu-item:hover { text-decoration:underline; } .last-item{ margin-right: 50px; } &lt;/style&gt; &lt;/head&gt; &lt;body class=&#34;hold-transition sidebar-mini layout-fixed&#34;&gt; &lt;nav id=&#34;menu-container&#34; class=&#34;arrow&#34;&gt; &lt;div id=&#34;btn-menu-nav-previous&#34; style=&#34;fill: #FFF&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div id=&#34;btn-menu-nav-next&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div class=&#34;menu-inner-box&#34;&gt; &lt;div class=&#34;menu&#34;&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 1&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 2&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 3&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 4&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 5&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 6&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 7&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 8&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 9&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 10&lt;/a&gt; &lt;a class=&#34;menu-item last-item&#34; href=&#34;#&#34;&gt;Menu 11&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt; &lt;!-- EXAMPLE 1: --&gt; &lt;script type=&#34;text/javascript&#34;&gt; document.addEventListener(&#34;DOMContentLoaded&#34;, function() { var menu = document.querySelector(&#34;.menu-inner-box&#34;); var prev = document.getElementById(&#34;btn-menu-nav-previous&#34;); var next = document.getElementById(&#34;btn-menu-nav-next&#34;); prev.addEventListener(&#34;click&#34;, function() { menu.animate([{scrollLeft: menu.scrollLeft}, {scrollLeft: menu.scrollLeft - 100}], {duration: 500, fill: &#34;forwards&#34;}); }); next.addEventListener(&#34;click&#34;, function() { menu.animate([{scrollLeft: menu.scrollLeft}, {scrollLeft: menu.scrollLeft + 100}], {duration: 500, fill: &#34;forwards&#34;}); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>但是根本不管用</p> </answer> <answer tick="false" vote="0"> <p>一个简单的替代方法是使用本机<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy" rel="nofollow noreferrer"><pre><code>scrollBy()</code></pre></a>方法。</p> <p>我支持平滑滚动的<pre><code>behavior</code></pre>参数：</p> <pre><code>el.scrollBy({ top: 100, left: 100, behavior: &#39;smooth&#39; }); </code></pre> <p>缺点：你不能改变过渡速度。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener(&#34;DOMContentLoaded&#34;, function() { var menu = document.querySelector(&#34;.menu-inner-box&#34;); var prev = document.getElementById(&#34;btn-menu-nav-previous&#34;); var next = document.getElementById(&#34;btn-menu-nav-next&#34;); prev.addEventListener(&#34;click&#34;, function() { menu.scrollBy({ left: -100, behavior: &#39;smooth&#39; }); }); next.addEventListener(&#34;click&#34;, function() { menu.scrollBy({ left: 100, behavior: &#39;smooth&#39; }); }); });</code></pre> <pre><code>nav#menu-container { background: #586e75; position: relative; width: 50%; height: 56px; } #btn-menu-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } #btn-menu-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } .menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; } .menu { padding: 0; margin: 0; list-style-type: none; display: block; text-align: center; } .menu-item { height: 100%; padding: 0px 25px; color: #fff; display: inline; margin: 0 auto; line-height: 57px; text-decoration: none; text-align: center; white-space: no-wrap; } .menu-item:hover { text-decoration: underline; } .last-item { margin-right: 50px; }</code></pre> <pre><code>&lt;nav id=&#34;menu-container&#34; class=&#34;arrow&#34;&gt; &lt;div id=&#34;btn-menu-nav-previous&#34; style=&#34;fill: #FFF&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div id=&#34;btn-menu-nav-next&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div class=&#34;menu-inner-box&#34;&gt; &lt;div class=&#34;menu&#34;&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 1&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 2&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 3&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 4&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 5&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 6&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 7&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 8&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 9&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 10&lt;/a&gt; &lt;a class=&#34;menu-item last-item&#34; href=&#34;#&#34;&gt;Menu 11&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

使用 jQUery 制作动画图像

我正在尝试学习如何制作这个人在他的网站上使用的效果。 我想从左向右移动图像，反之亦然。 我该怎么做？ http://www.adhamdannaway.com/about

模态关闭时重设动画Jquery。

我的购物车图标在中间。但我如何重新设置位置。所以当我关闭模式时，我想让它再次处于中间位置。$("#addedToCartModal").on('hide.bs.modal', function () { $(...)

adobe animate - 发布到I Phone

我已经用as3在adobe animate中编写了一个应用程序，并将其发布到我的手机（I Phone 6，操作系统：IOS 12.4.4）进行测试。我得到的黑色边框，在顶部和按钮的 ...

覆盖替换一个jquery点击函数。

如果这是一个明显的问题，请原谅我。我在一个页面上使用一个我无法删除或更改的脚本。点击一个按钮，通过ajax请求将一些项目加载到页面上，然后......

使用动画转换旋转地球svg

我正在按照本教程使用SVG 属性为地球自转设置动画。它可以正常工作，但是当我将其应用于我自己的SVG时，我在维护地球地图时遇到了麻烦...

如何使用CSS动画使用Java脚本将对象移动到另一个对象

我正在尝试仅使用Java脚本/ Vue js在购物车中创建硬币收集动画。所以我决定用原始的Java脚本来做。所以最初我是在尝试看本教程的w3schools ...

跨单独的组/列表的html元素的平滑随机播放动画

以下是我在shopify主题中拥有的html结构的简化代码段：'''/ * ---搜索容器--- * / / * --- ---------- -...

如果陈述为真，如何停止setinterval函数

i创建一个将元素移动1 px并使用setInterval heres在特定时间重复它的函数。代码：var Elementt = document.querySelector（'。h'）; var left = 0;变速= 100; var ...

jQuery滚动显示按钮单击时显示特定DIV

在我的html页面中，我大约有五个按钮。这些按钮排列在单个DIV中，并且这些按钮位于页面底部。当我单击这些按钮之一时，页面将向上滚动。我...

Anime.js-拖动滑块并更新旋转速度？

我有一个滑块和一个旋转动画。因此，如下所示：speed = 2000 var rotation1 = anime（{目标：'＃ferris'，rotate：'1turn'，循环：false，缓动：'...

要使用CSS或jquery对图像进行滚动效果

我的要求是在加载时显示一些英雄图像，然后在滚动时显示完整的图像。参考网站：https://karpov.paris/（类似英雄形象效果），我尝试探索...

如何使用带有jQuery动画的平滑页面滚动并同时更新URL？

我正在使用带有自定义动画的jQuery动画功能来触发网站上的平滑滚动。我在代码的末尾使用event.preventDefault（）函数调用，并通过此选项将...

将绝对div动画到左：0，然后到右：0并循环播放

[好吧，我知道如何为div制作动画并循环播放动画和内容，但这确实让我感到不安，我想为div的动画设置为left：0;然后向右：0;并循环播放动画，它将不起作用...

为什么这种反向条件动画不起作用？

[这段代码应该在单击#topbar时扩展#bottombar，并在#bottombar高度为200px时隐藏它，但是行为很奇怪。这是为什么？先感谢您。 ..

不确定如何为我的随机报价单发生器设置动画

我正在尝试使我的随机报价生成器具有动画效果。我希望动画看起来像另一张卡片，在同一张卡片上翻转相同的样式，类似于一副纸牌。我不...

不知道如何为我的随机报价单发生器设置动画。帮助入门

我正在尝试使我的随机报价生成器具有动画效果。我希望动画看起来像另一张卡片，在同一张卡片上翻转相同的样式，类似于一副纸牌。我不...

悬停时的背景图像更改

我正在创建一个jQuery背景更改脚本。该脚本正在运行，但是当我添加一些淡入动画时，它会变得有点小虫。当您将鼠标悬停在文本上2-3次时，对于某些内容没有任何显示...

JS中出现滑动和/或动画的问题

是什么：我的可滑动表格有问题。它使用香草JS方法来实现滑动识别和动画以循环浏览表单的每个部分。我的问题：当太多...

如何在jS中执行函数队列执行

我使用jQuery来简化框的隐藏和显示。例如，如果您单击以隐藏一个框，它将隐藏所有框，但是只有不应该被隐藏的框才会再次出现。