使用 JQuery toggleclass 来操作点击转换

Question

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

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

#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;   
}

我尝试使用延迟在class和之间切换：

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

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

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

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

提前致谢。

Answer 1

为了 delay() 在非动画元素上工作，你必须 "queue" 运算符：

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

使用 JQuery toggleclass 来操作点击转换

Using JQuery toggleclass to manipulate click transitions

javascript

jquery

css

css-transitions

toggleclass