Изменение цвета фона раздела <div> - PullRequest
Новая
       1

Изменение цвета фона раздела <div>

1 голос
/ 01 октября 2011

Я пытаюсь использовать jQuery для изменения цвета фона раздела <div> при нажатии на кнопку, и ниже приведен код для этого. Почему не работает?

HTML-файл 

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css"> 
#name{
background-color: #FFFFF2;
width: 100px;
}
</style>
</head>
<body>
<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</body>

</html>

script.js 

$("bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

Спасибо.

Ответы [ 3 ]

5 голосов
/ 01 октября 2011

У вас есть несколько проблем:

  1. Ваш селектор неверен: $("#bgcolor")
  2. Вам не хватает закрывающего тега </div>.
  3. Вам нужен jQueryUI для анимации background-color.

HTML: 

<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</div>

JS: 

$("#bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

Ваш код исправлен (и работает с jQueryUI): http://jsfiddle.net/andrewwhitaker/rAVj9/

1 голос
/ 01 октября 2011

Убедитесь, что вы включили селектор CSS внутри jQuery, на который хотите настроить таргетинг. 

$("bgcolor").click(function(){

Должно быть: 

$("#bgcolor").click(function(){

Потому что вы нацелены на идентификатор.

1 голос
/ 01 октября 2011

с веб-сайта jQuery:

Все анимированные свойства должны быть анимированы в одно числовое значение, кроме отмеченных ниже; большинство нечисловых свойств не может быть анимировано с использованием основных функций jQuery. (Например, ширина, высота или слева могут быть анимированы, но цвет фона не может быть.)

Использование пакета пользовательского интерфейса jquery для анимации цветов.

...