У меня есть веб-сайт, который некоторое время использует анимацию цвета фона, когда внезапно они просто перестали работать. Я не могу думать о каких-либо серьезных изменениях, которые я сделал, что вызвало бы это. Поэтому я создал папку для проверки файлов jquery.min.js и jquery.ui.js. Вот код:JQuery UI, похоже, не загружается
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/testing.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template 3</title>
</head>
<body>
<?php
include('parts/welcomeSection.php');
?>
</body>
<script type="text/javascript" src="js/animate.js"></script>
</html>
testing.css
@charset "utf-8";
/* CSS Document */
div#testing{
width: 100px;
height: 100px;
border: 1px solid black;
}
welcomeSection.php
<div id="testing">
</div>
animate.js
$(document).ready(function(){
color = 'red';
window.setInterval(function(){
if(color == 'red'){
$('div#testing').animate({'background-color': 'blue'}, 'fast', 'easeOutQuint');
color = 'blue';
}
else if(color == 'blue'){
$('div#testing').animate({'background-color': 'red'}, 'fast', 'easeOutQuint');
color = 'red';
}
console.log(color);
}, 5000);
});
Одна вещь, чтобы отметить, что консоль регистрации цвета меняются каждый раз. Но фоновый цвет не меняется. Вместо этого я получаю эту ошибку:
Uncaught TypeError: na.easing[this.easing] is not a function
Это не только цвет фона, он также не работает на границе цветов анимации либо. Кроме того, он не распознает «easeOutQuint». Все это приводит к тому, что что-то не так между JQuery и JQuery UI. Я попытался загрузить файлы JQuery JQuery и JQuery снова, но это не устранило проблему.
Обычные анимации JQuery, такие как анимация marginLeft, отлично работают.
Update:
Я обнаружил, что это проблема только с Chrome. Во время просмотра Интернета у меня были перегибы на сайтах, которые используют JQuery. Но они отлично работают в других браузерах, таких как Microsoft Edge. Это проблема с моим Chrome?
Почему вы не пытаетесь достичь этого, используя переходы CSS или простую анимацию CSS? – markoffden
Я мог бы в этом примере, но это было бы более сложно, чем необходимо для моей другой веб-страницы. Плюс я хотел бы знать, что происходит с пользовательским интерфейсом JQuery, потому что я часто использую его очень часто. –
хорошо, учитывая основы веб-дизайна и профиль полосы пропускания пользователя, я бы избегал использования внешних библиотек в простых задачах, таких как этот, вы можете достичь такого рода эффектов более стильным и легким способом. – markoffden