javascript - 使用 JQuery toggleclass 来操作点击转换

Question

我正在尝试在单击按钮时进行漂亮的转换。 该按钮基本上是一个触发 Jquery 函数的 div。该按钮由一些文本和一个 FontAwesome 图标组成。

我想以一种方式使用 JQuery，当我单击按钮时，FA 图标的大小会快速变化并变回，这样人们就会得到某种单击按钮的动画确认。我创建了一个过渡类，它至少增加了字体大小:

#keepbtn.clicked {
    font-size:3em;
    opacity:0.8;
    -webkit-transition: all 0.1s ease 0s;
    -moz-transition: all 0.1s ease 0s;
    -ms-transition: all 0.1s ease 0s;
    -o-transition: all 0.1s ease 0s;
    transition: all 0.1s ease 0s;   
}

我尝试在类之间切换使用延迟:

$("#keepbtn").toggleClass("clicked").delay(250).toggleClass("clicked");

但这行不通；它不会改变任何东西。 但是，这有效(但当然不会将其更改回原始大小:

$("#keepbtn").toggleClass("clicked");

有什么想法吗？我对转换和 JQuery 比较陌生，所以我可能完全采用了错误的方法。

提前致谢。

Answer 1

为了 delay() 在非动画元素上工作，你必须“排队”运算符:

$("#keepbtn")
    .toggleClass("clicked")
    .delay(250)
    .queue(function(nxt) {
         $(this).toggleClass("clicked");
         nxt();
    });