Почему параметры анимации jCery-ui addClass не имеют никакого эффекта? - PullRequest
Новая
       43

Почему параметры анимации jCery-ui addClass не имеют никакого эффекта?

0 голосов
/ 08 октября 2019

Цель: временно оживить изменение класса элемента, fx изменить цвет фона на СИНИЙ, а затем вернуться к обычному.

Подход: добавить класс к элементу на указанное время в мс с анимацией с использованием addClass jquery uiметод, затем удалите с помощью 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>

1 Ответ

0 голосов
/ 09 октября 2019

Я подозреваю, что вам просто нужен хороший обратный звонок. Он будет использовать 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>
...