我能模拟jQuery中removeClass函数的回调函数吗?(涉及IT技术,提问标题)

8

我试图按顺序执行这些removeClass调用。似乎没有使用removeClass的回调函数,那么有没有另一种方法来模拟这个过程呢?

  $("#card1").removeClass('flip');

  //wait for card1 flip to finish and then flip 2
  $("#card2").removeClass('flip');

  //wait for card2 flip to finish and then flip 3
  $("#card3").removeClass('flip');

没有必要等待从元素中删除类。你可以直接删除并添加它,这有什么意义呢? - Hojat Jafari
这是CSS3转换的一部分,所以我正在寻找一个有趣的效果。 - Paul
2个回答

8

看起来你正在使用CSS3过渡效果来完成这个操作。 最简单的方法是手动设置延迟:

$("#card1").removeClass('flip');

setTimeout(function(){
   //wait for card1 flip to finish and then flip 2
   $("#card2").removeClass('flip');
}, 500);

setTimeout(function(){
   //wait for card2 flip to finish and then flip 3
   $("#card3").removeClass('flip');
}, 1000);

没有内置的jQuery方法来检查CSS过渡是否完成。


1
transitionEnd事件(或webkitTransitionEnd等)应该可以正常工作。 - pimvdb
...或者 mozTransitionEnd 等。我认为现在计时器更好,并且在 transitionEvent 事件无法触发的情况下会更加健壮。 - Inferpse
最好嵌套超时而不是一个接一个地调用。 - Shmiddty

3

古老的话题,但是Google知道它 ;-)

jQueries UI有一个扩展函数可以用于removeClass(移除类)。

<div class="big-blue"></div>

$( "div" ).click(function() {
  $( this ).removeClass( "big-blue", 1000, "easeInBack", function(){
      // do fancy stuff after animation is completed
  });
});

jQuery-UI文档:http://api.jqueryui.com/removeclass/

(说明:本内容为已完成翻译的中文)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接