Цветовая анимация jQuery - PullRequest
Новая
       17

Цветовая анимация jQuery

2 голосов
/ 23 ноября 2010

Я застрял с функцией, которая не хочет анимировать ...

Я использую последний jQuery Color Plugin , чтобы включить цветную анимацию.Теперь, что должно произойти в следующем коде, это то, что (когда это работает, конечно):

(1) пользователь выбирает цвет, (2) на основе значения RGB этого цвета, мы создаем более светлый оттенокэтого цвета, (3) при наведении курсора на ссылку ее цвет заменяется вновь рассчитанным цветом, (4) при удалении от ссылки исходный цвет должен быть анимирован.

Работа по замене цветаАбсолютно хорошо, но анимация не так, как она выглядит в настоящее время, больше похожа на традиционный эффект парения CSS, чем на 800 мсек с помощью jQuery.

Если бы ниндзя помог мне, я бы большеготовы сиять ваши метательные звезды на неделю :).Вот код: 

$('a').hover(function() {
//code when hover over
$oldColour = $(this).css('color');

    $(this).animate({'color': $(this).css('color', function(i, v){
      var rgb = getRGB($(this).css('color'));

      for(var i = 0; i < rgb.length; i++){
        rgb[i] = (rgb[i] + 60 < 255) ? rgb[i] + 60 : 255;
      }

      var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
      return  newColor;

      }) //end anonymous function
    }, 800); //end animate


    }, function() {
      //code when hovering away
      $(this).animate({'color': $(this).css('color', $oldColour)}, 800);
    });

Ваша помощь, как всегда, потрясающая и высоко ценится!Спасибо (и девочкам, конечно) за то, что взглянули:)

PS Чтобы увидеть живой пример, перейдите на демонстрационную страницу и наведите курсор на любую ссылку ...

===== ОБНОВЛЕНИЕ: Требуется дополнительная помощь ===== Код Камбраки под ним работает отлично.За исключением того, что в IE он сначала выцветает до очень темного цвета, затем возвращается к исходному цвету, когда я выключаю мышь, а затем, когда я снова наводю на него курсор, отображается правильный пересчитанный цвет ...

Есть идеикак решить это для IE?

1 Ответ

2 голосов
/ 23 ноября 2010

Попробуйте это 

var $oldColour;

$('a').hover(function() {
    //code when hover over
    $oldColour = $(this).css('color');
    var rgb = getRGB($(this).css('color'));
    for (var i = 0; i < rgb.length; i++)
        rgb[i] = Math.min(rgb[i] + 60, 255);
    var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
    $(this).animate({'color': newColor}, 800);
}, function() {
    //code when hovering away
    $(this).animate({'color': $oldColour}, 800);
});
...