Question

我正在使用JQuery UI toggleClass将一个类添加到我的某个元素中，并且我很难获得持续时间并且回调生效。

我担心JQuery toggleClass函数被调用而不是被覆盖的JQuery UI函数，所以我在JQuery UI方法中发出一个警告，发现它实际上是被调用的JQuery UI方法。但是，它会忽略duration参数，并立即调用completion参数。

     this.$el.toggleClass('success', 100000, 'easeOutSine', function () {
           alert('animation completed')
         })

JQuery UI Documentation

我尝试过多种不同的方式调用toggleClass函数：

将duration参数作为字符串传递
将持续时间参数作为数字

根据文档

将duration参数作为Object传递

   this.$el.toggleClass('success', {
       'duration': 100000,
       'complete': function () {
         alert('function completed')
       }
     })

我也尝试过：this.$el.toggleClass('success', 500000, 'easeOutSine', function () { console.log('completed') })

根据以下建议。

该类被添加或删除到元素，但完成的回调函数立即运行。

Answer 1

您是否在页面中添加了jQueryUI脚本？

转换功能仅在jQueryUI中可用，而不在jQuery中。

请检查以下两个链接。

https://api.jqueryui.com/toggleClass/

http://api.jquery.com/toggleclass/

谢谢， Amit Prajapati

Answer 2

我尝试使用相同的toggleClass函数，但我没有遇到任何错误。您可以确认您的代码中定义了success类。

HTML

<div class="toggler">
  <div id="effect" class="success ui-corner-all">
      I will change my color on toggle
  </div>
</div>

<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>

JS

$(function() {
    $( "#button" ).click(function() {
      $( "#effect" ).toggleClass('success', 5000, 'easeOutSine',function(){
              alert('animation completed')
         });
    });
  });

这是DEMO

JQuery UI - toggleClass计时功能不起作用

2 个答案: