2016-02-07 4 views
0

У меня есть веб-сайт, который некоторое время использует анимацию цвета фона, когда внезапно они просто перестали работать. Я не могу думать о каких-либо серьезных изменениях, которые я сделал, что вызвало бы это. Поэтому я создал папку для проверки файлов 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?

+0

Почему вы не пытаетесь достичь этого, используя переходы CSS или простую анимацию CSS? – markoffden

+0

Я мог бы в этом примере, но это было бы более сложно, чем необходимо для моей другой веб-страницы. Плюс я хотел бы знать, что происходит с пользовательским интерфейсом JQuery, потому что я часто использую его очень часто. –

+0

хорошо, учитывая основы веб-дизайна и профиль полосы пропускания пользователя, я бы избегал использования внешних библиотек в простых задачах, таких как этот, вы можете достичь такого рода эффектов более стильным и легким способом. – markoffden

ответ

0

Изменение background-color в backgroundColor

также убедитесь, что ваши JQuery-ui.js содержит JQuery ослабление s

+0

Я изменил «background-color» на «backgroundColor» и получил тот же результат. Я также пользовательский загруженный пользовательский интерфейс JQuery, чтобы убедиться, что каждый параметр отмечен галочкой –

0

я понял, что проблема была. Кажется, моя локальная версия Chrome делала что-то напуганное. Поэтому я переустановил Chrome, и код работает нормально. Похоже, что Chrome не работает с Chrome.

Смежные вопросы