我有一个需要在网页中插入的循环动画的问题。 我使用动画在网页上显示数字进展。 每次我将鼠标悬停在该部分时,我只需要调用此动画函数,但下面的代码以一种奇怪的方式运行。 动画第一次正确执行,但在动画结束后它执行一种回滚,以相反的方式执行动画返回值 1。
我使用的代码报告如下:

 $("#numberFarm").hover(function() { $('.countIncrement .count').each(function() { $(this).prop('Counter', 0).animate({ Counter: $(this).text() }, { duration: 3000, easing: 'swing', step: function(now) { $(this).text(Math.ceil(now)); } }); }); });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="numberFarm"> <div class="container"> <h2>i nostri numeri</h2> <div class="row"> <div class="col-xs-4"> <div class="box_icon"><img src="/assets/images/transport_icon.png" /></div> <div class="divCountIncrement"> <h4 class="countIncrement"><span class="count">38</span> <br/><span class="numberDesc">veicoli</h4></div></div> <div class="col-xs-4"> <div class="box_icon"><img src="/assets/images/persons_icon.png" /></div> <div class="divCountIncrement"><h4 class="countIncrement"><span class="count">43</span> <br/><span class="numberDesc">staff</span></h4> </div> </div> <div class="col-xs-4"> <div class="box_icon"><img src="/assets/images/kilo_icon.png" /></div> <div class="divCountIncrement"> <h4 class="countIncrement"><span class="count">2</span> <br/><span class="numberDesc">milioni di km percorsi</span></h4> </div> </div> </div> </div> </section>

你对这种奇怪的行为有什么解释吗?
如何解决此问题以防止恢复到原始状态?

#1楼 票数:4 已采纳

因为$("#numberFarm").hover(function () {需要另一个function()

例子:

$( the-element ).hover(
  function() {
    //this is the `mouseenter`
  }, function() {
     //this is the `mouseleave`
  }
);

.hover() 方法绑定了 mouseenter 和 mouseleave 事件的处理程序。 您可以使用它在鼠标位于元素内时将行为简单地应用于元素。

调用$( selector ).hover( handlerIn, handlerOut )是以下的简写:

 $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

阅读.hover()文档

  ask by Marcus translate from so

未解决问题?本站智能推荐:

1回复

当 div 为空时 jQuery 执行函数(不是 onload)

我有一个表单中的 div,当页面加载时,其中有复选框作为选项。 填写某些表单字段后,由于兼容性原因,某些组合将不允许您检查额外的选项,因此 div 中的选项将被删除。 我的问题是:有没有办法在页面加载后检查特定 div 是否为空? 所以是的,执行一个函数。
3回复

滚动到特定时,开始执行jQuery函数 [重复]

这个问题在这里已有答案: 如何在滚动后检查元素是否可见? 39个答案 我有一个jQuery脚本,在页面上显示一个动画计数器,但脚本在页面加载时开始,我需要在用户向下滚动到特定的<div>时加载它。 当我滚动到页面上的这个特定<div>
2回复

每次单击按钮时,我都想使用 JQuery 执行一个函数

我想使用 jQuery 和 CSS(以及 ofc php,但这与我的问题无关)制作颜色的动态列表。 当他们单击“选择颜色”按钮时会出现问题,我的颜色列表将出现,如果用户单击其中任何一个,其他人将显示无,如果用户尝试更改所选颜色,则会出现问题工作! <div class="onfocus"&g
1回复

在溢出DIV中滚动时执行JavaScript函数

我使用jquery并一直在搜索许多方法来使这个脚本工作。 最后,我仔细查看并为index.html尝试了这个脚本 我简单的JavaScript 结果: http://jsfiddle.net/agnanzakariya/xGV8Q/53/ 实际上,这种方法很有效,但
1回复

当正在滚动的内容位于设置为溢出的固定div内时,如何在jquery中执行滚动命令:滚动

当某个div(我们将其称为div2)正在滚动时,我想使用jquery执行命令。 除了div2包含在另一个div(div1)中并且div1的高度设置为100vh且其溢出设置为滚动时,这将没有问题。 换句话说,据我所知,jquery无法识别任何实际滚动的内容。 当我告诉jquery在整个窗口滚
2回复

嵌套的Jquery滚动函数

我正在尝试制作一个滚动到我的网站的相应<div>的导航。 相应的divs嵌套在另一个具有max-height和scrollbar的div 。 那时我的jquery往往让我失望。 他是我与我的问题相关的另一个问题的小提琴: JSFIDDLE 请注意,当您单击该按钮时,它
2回复

对1 div执行JQuery函数

我做了一些控件,可以编辑加载到应用程序中的特定页面的背景颜色,字体等。 现在,例如当我更改背景颜色时,整个页面都会获得该颜色。 当然,我也不想更改控制面板(左右)。 整个页面都构建为html表,中间一列是一个div,这是我要编辑的页面。 中间div代码: 我想执
2回复

无法通过滚动特定div来触发jquery函数

简短版:这有效 这不是: 长版本:对不起,但发布代码片段是不可行的,因为它是一个复杂的应用程序类似的界面,但我会尽力解释这个问题: 移动响应式网站,根据屏幕不动产加载不同的界面。 最小的界面由3个部分组成 - 顶部导航,底部搜索和中间内容。 内容主要在使