JQuery анимированный фоновый код не работает! - PullRequest
Новая
       11

JQuery анимированный фоновый код не работает!

0 голосов
/ 15 марта 2011

Видите, у меня есть код jquery, который я думал, что он должен работать, но все же он не работает! Поэтому, пожалуйста, можете помочь мне. У ввода есть исходный цвет фона #fff, и я хочу, чтобы при фокусировке этого ввода цвет фона изменился на #789 с эффектом затухания. Вот код, который я сделал. 

$('input.login_reg_input').focus(function () {
   $(this).animate({
     backgroundColor:fadeColor
   }, 250, 'linear', function() { });
});

Я выполнил поиск по стеку и не нашел хорошего решения. Поэтому, пожалуйста, помогите мне с этим.

Заранее спасибо!

Ответы [ 6 ]

6 голосов
/ 15 марта 2011

Только с помощью библиотеки jQuery вы не можете анимировать цвет фона. Но вы можете анимировать его с помощью пользовательского интерфейса jQuery.

Так что это прекрасно работает 

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function(){
            $('input.login_reg_input').focus(function () {
                $(this).animate({
                    'backgroundColor': '#768'
                }, 250, 'linear', function() { });
            });
        });
    </script>
</head>
<body>
    <input class="login_reg_input">click me</input>
</body>
</html>

Несколько лет спустя, есть лучшие альтернативы:

Использование CSS3

jsFiddle 

input.login_reg_input {
    -ms-transition: background-color 1s;
    -o-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}

input.login_reg_input:focus {
    background-color: #789;
}

Использование только jQuery (без jQuery UI)

jsFiddle 

$('input.login_reg_input').focus(function () {
    var $elem = $(this),
        cnt = 0,
        from = {    // animate from white (reg, green, blue) 255
            r: 255,
            g: 255,
            b: 255
        },
        to = {    // to #778899 (119, 102, 136)
            r: 119,
            g: 102,
            b: 136
        };

    // interpolate "from" color to the "to" color
    $(from).animate(to, {
        duration: 1000,
        step: function(now) {
            // step is invoked for each r, g and b.
            if (++cnt % 3 === 0) {  // I want to process only when the whole triple is interpolated
                $elem.css('background-color',
                          'rgb('
                              + Math.round(this.r) + ',' 
                              + Math.round(this.g) + ','
                              + Math.round(this.b) + ')');
            }
            // confused? Just uncomment line below and you will get the hang of it
            // console.log(now, this);
        }
    });
});
2 голосов
/ 15 марта 2011

Я нашел этот абзац в http://api.jquery.com/animate/:

Все анимированные свойства должны быть анимированы в одно числовое значение, кроме как указано ниже;большинство нечисловых свойств не может быть анимировано с использованием основных функций jQuery.(Например, width, height или left могут быть анимированными, но background-color не может быть.) Значения свойств обрабатываются как количество пикселей, если не указано иное.Единицы измерения em и% могут быть указаны, где это применимо.

Это говорит о том, что цвет фона не может быть анимирован.

1 голос
/ 15 марта 2011

На странице animate в jQuery docs:

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

0 голосов
/ 23 марта 2011

jQuery не поддерживает цветную анимацию, поэтому вам понадобится плагин цвета или пользовательский интерфейс jQuery.

вы можете использовать эти свойства только для плагинов

это библиотека http://plugins.jquery.com/files/jquery.colorBlend.js_6.txt

0 голосов
/ 15 марта 2011

В дополнение к другим ответам, в которых правильно цитируются документы animate(), можно анимировать background-color с помощью цветного плагина или с помощью jQuery UI .

Демонстрация использования JS Fiddle .

0 голосов
/ 15 марта 2011

Проверьте эту ссылку здесь :

Похоже, вам понадобится плагин цвета jQuery

Я пробовал с тестомваш код и он работает, сохранив плагин цвета локально: 

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script src="jquery.color.js"></script>
</head>
<body>
    <input class="login_reg_input" type="text" />

    <script>

    $('input.login_reg_input').focus(function () {
        $(this).stop().animate({
        backgroundColor:'yellow'
    }, 250, 'linear', function() { });
    });

    </script>

</body>
</html>
...