Как установить jQuery UI и анимировать цвет divs?

#jquery #jquery-ui

#jquery #jquery-ui

Вопрос:

В настоящее время я использую jQuery для анимации положения div

 import $ from "jquery";

$("#divId").animate({
    left: "50px"
}, 1000);
  

Который работает правильно. Теперь я хотел бы также анимировать цвет div. Что-то вроде:

 $("#divId").animate({
    left: "50px",
    backgroundColor: "green"
}, 1000);
  

Для этого я попытался использовать библиотеку jQuery-UI и импортировать ее следующим образом:

 import $ from "jquery";
import "jqueryui";
  

Однако, похоже, ничего не происходит. Я просмотрел документацию jQuery-UI и, похоже, не могу найти документацию для импорта библиотеки в проект с этим синтаксисом.

Ответ №1:

Протестировано, и ваш код работает так, как ожидалось.

 $(function() {
  $("#divId").animate({
    left: "50px",
    backgroundColor: "green"
  }, 1000);
});  
 #divId {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 200px;
  border: 1px solid #ccc;
}  
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="divId"></div>  

Проверьте консоль на наличие ошибок и подтвердите в источнике просмотра, что вы загружаете все ожидаемые библиотеки.