Анимированый линейный переход по клику

245
07 апреля 2017, 23:38

Добрый день уважаемые. Подскажите, пожалуйста как реализовать анимацию перехода линейного градиента при background у дива, по клику на кнопку Пример

$("button").on("click", function(){ 
	$(".block").animate({background: "linear-gradient(to bottom, #4b5fff 60%, #ebebeb)"}, 1000); 
})
.block{ 
  width: 100px; 
  height: 100px; 
  border: 1px solid #000; 
  background: linear-gradient(to bottom, #0D343A 40%, #000);  
} 
button{ 
  margin-top: 20px; 
  width: 100px; 
  height: 20px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<div class="block"></div> 
<button></button>

Необходимо реализовать что б по клику на button из одного линейного градиента все перестроилось в другой за 1сек. Это вообще реально?

Answer 1

По клику добавляй кнопке класс , а этому классу напиши анимацию на css "@keyframes" c нужными точками и переходами

READ ALSO
Перевод PHP кода в JavaScript

Перевод PHP кода в JavaScript

Имеется следующий PHP-код:

224
Какие ранее нерешаемые задачи решает Content Security Policy?

Какие ранее нерешаемые задачи решает Content Security Policy?

Если мы говорим о XSS, то неужели недостаточно простой функции htmlspecialchars?

218
Парсинг данных с сайта через js google scripts

Парсинг данных с сайта через js google scripts

Занимаюсь парсингом базы данных школ по Санкт-ПетербургуСпарсил первую страницу, на второй скрипт в гугле запускается, но в таблицу ничего...

381
Отслеживание состояния checkbox

Отслеживание состояния checkbox

Есть 5 текстовых полей (input) и один checkboxНеобходимо сделать проверку если все 5 полей имеют одинаковое значение тогда checkbox имеет атрибут checked...

280