Question

我正在尝试为点击事件上的按钮创建动画。动画使用简单的函数，它简单地包括切换类和设置超时。

它适用于一个按钮，但是当我有多个按钮并且在动画完成之前我连续点击其中的两个或更多按钮时，动画将停止并继续在稍后单击的元素上。

所以问题是让动画函数引用触发它的对象，因此创建它的多个实例，在搜索几小时之后我无法找到一个简单的解决方案。

提前致谢。

有一个简化的例子（真实的例子有更多的类切换）：

$('.myButton').on('click', animateButton);
function animateButton(){

  var $this = $(this);
  $this.addClass('animate');

  setTimeout(function(){
    $this.removeClass('animate');
  },2000)

}

编辑：我做了一个小提琴：https://jsfiddle.net/8ozu14am/

EDIT2：已解决

使用$ .proxy（）可以维护上下文。

$('.myButton').on('click', animateButton);
function animateButton(){

  $(this).addClass('animate');

  setTimeout($.proxy(function(){
    $(this).removeClass('animate');
  },this),2000)

}

Answer 1

Jquery将Event返回给您的处理程序。

它具有属性target，它是启动事件的DOM元素。

$('.myButton').on('click', animateButton);
function animateButton(evt){

  var $this = $(evt.target);
  $this.addClass('animate');

  setTimeout(function(){
    $this.removeClass('animate');
  },2000)

}

Answer 2

解决

使用$ .proxy（）可以维护上下文。

https://api.jquery.com/jQuery.proxy/

$('.myButton').on('click', animateButton);
function animateButton(){

  $(this).addClass('animate');

  setTimeout($.proxy(function(){
    $(this).removeClass('animate');
  },this),2000)

}

多个同步按钮动画

2 个答案: