jQueryUI одушевленные (цвет) не работает

Я хочу, чтобы анимировать цвет фона элемента ввода, но он не работает :(jQueryUI одушевленные (цвет) не работает

JavaScript (если представить):

function sendImage() { 
    formularz = $('form#sendImage'); 
    autor = formularz.children('input[name=autor]'); 

    if (autor.val().length < 1 || autor.val().length > 20) { 
     console.log('start'); 
     autor.animate({ 
      backgroundColor: 'red', 
      width: '100px', 
     }, 3000, function() { 
      console.log('end'); 
     }); 
    } 
}

JQuery liblaries:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css"> 
<script src="jquery-ui/external/jquery/jquery.js"></script> 
<script src="jquery-ui/jquery-ui.min.js"></script> 
<!-- I tried also this --> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

в функции JS работает хорошо - журналы в консоли отображаются, ширина элемента тоже меняется, но цвет фона не так и не показывают каких-либо ошибок в консоли

Любые предложения?

источник

2016-03-05 Invictus

Не должен быть 'background-color' вместо' backgroundColor'? –

@noob, если вы используете имя свойства как литерал, тогда вы не можете включить '-', поскольку он недействителен, поэтому вам нужно будет использовать строку. jQuery достаточно умен, что он может принимать либо свойство CSS, либо имена свойств стиля DOM. Таким образом, в этом случае будет работать любое из следующего: ''background-color'',' backgroundColor', '' backgroundColor'' –

@Invictus Обратите внимание, что вы включаете несколько версий jQuery и jQueryUI - вы должны удалить один из них , –

jQuery не может анимировать цвета фона по умолчанию. У вас есть два варианта: сначала вы можете использовать сторонний плагин. Во-вторых, вы можете использовать CSS. Последнее предпочтительнее. Вот как это сделать, установив правило CSS transition на элемент, а затем просто добавив класс в код jQuery.

input { 
    transition: all 3s; 
} 
input.error { 
    background-color: red; 
}

function sendImage() { 
    var $formularz = $('form#sendImage'); 
    var $autor = $formularz.children('input[name=autor]'); 

    if ($autor.val().length < 1 || $autor.val().length > 20) { 
     $autor.addClass('error'); 
    } 
}

Working example

источник

2016-03-05 19:43:43

Я уверен, что в JavaScript, вы должны указать, что вы добавляете стиль к элементу с помощью его идентификатора. Так что, если вы установите Id такой элемент, чтобы быть AUTOR он будет работать, используя следующие в вашей, если заявление:

document.getElementById('autor').style.background-color="red";

источник

2016-03-05 19:46:51 Zaataro

Но это без анимации (догадка). – Invictus

Рори McCrossan, я проверил свои рекомендации и 'backgroundColor' работали хорошо, но позже я хотел еще раз проверить backgoundColor и он также работает ...

Так что я не знаю, что случилось. Майби, о чем-то, или я забыл о чем-то определенном. Извините за путаницу.

источник

2016-03-05 20:46:28 Invictus

jQueryUI одушевленные (цвет) не работает

ответ

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