jquery-ui addClass动画参数为什么没有效果？

Question

目标：暂时为元素上的类更改设置动画，fx 将背景颜色更改为蓝色，然后恢复正常。

方法：使用 jquery ui 的 addClass 方法将类添加到指定时间（以 ms 为单位）的元素，然后使用 removeClass 删除。

问题：动画效果很好，但是无论我做什么，持续时间和缓动的参数都没有效果。为什么？

也欢迎其他方法。

// find elements
var banner = $("#banner-message");
var button = $("button");

// handle click and add class
button.on("click", function(){

	// Temporarily change class
	//flashClass("alt", banner, { inTime: 2000, outTime:500, easeName:'swing'});
  
  // Try default method with long duration for adding class only
  banner.addClass( "alt", 2000, "swing" );
  
  // Try explicit version for adding class only
  /*
  banner.addClass( "alt", { 
  	duration: 2000, 
    easing: "swing", 
    complete: function() {}, 
    children: false,
    queue: true    
    });
    */
    
  
    
})


 
 function flashClass(className, jqElem, transitionObj) {
 	if(!(className && jqElem)) return false;
 	if(!transitionObj) {
  	transitionObj = {
    	inTime: 500,
      outTime: 500,
      easeName: 'linear'
    }
  }
    
  jqElem.addClass(className, transitionObj.inTime, function() {
    setTimeout(function() {
    	jqElem.removeClass(className,transitionObj.outTime, null);
    }, 500);
  });  
 }

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

Answer 1

我怀疑你只是需要一个好的回调。它将使用setTimeout() 来确保它不会立即运行。

$(function() {
  // find elements
  var banner = $("#banner-message");
  var button = $("button");

  // handle click and add class
  button.click(function(e) {
    banner.addClass("alt", 2000, removeAlt);
  });

  function removeAlt(t) {
    setTimeout(function() {
      banner.removeClass("alt");
    }, 2001);
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>