Анимированные переходы изменения цвета - PullRequest
Новая
       25

Анимированные переходы изменения цвета

0 голосов
/ 04 ноября 2010

Всякий раз, когда с помощью css или чего-либо другого мы меняем цвета, такие как фон, цвет, цвет границы и т. Д. Есть ли способ анимировать переход между цветами обычного состояния и состояния при наведении?

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

Есть ли способ достичь этого?

Ответы [ 4 ]

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

Это можно сделать с помощью CSS3, хотя это еще не полностью кросс-браузер. http://www.the -art-of-web.com / CSS / CSS-анимация / 

a { 
    -webkit-transition: all 1s ease-in-out; // control the animation time via '1s'
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    color:#ff0000;
}

a:hover { color:#00ff00 }

В качестве альтернативы вы можете использовать jQuery .animate (); http://api.jquery.com/animate/

        $("#yourdiv").css({
            backgroundColor: #000000 // Original Background color
        }).hover(function() {
            $(this).stop().animate({
                backgroundColor: #ff0000 // Hover State Background color
            }, 350); // animation time
        }, function() {
            $(this).stop().animate({
                backgroundColor: #000000 // Hover out ( back to original )
            }, 350); // animation time
        });
1 голос
/ 05 ноября 2010

это возможно?да

как это возможно?javascript

X3Maverick имеет хороший ответ (из-за голосов, извините), но вы также можете попробовать сделать таймер для соответствующей корректировки цветов 

var interval = 500,
  iteration = 0,
  maxIterations = 10;

setTimeout(doUpdate, interval);

function doUpdate()
{
  //color logic here 'rgb( R, G, B)' or #GHIJKL
  switch (interval)
  {
    case 0:
    ...
  }
  if (iteration < maxIterations) setTimeout(doUpdate, interval);
}

, это позволит вам указатькакие именно цвета вы хотите и в каком порядке.Пожалуйста, используйте свои силы только для добра или для клёва.Мигающие цвета и мигающий текст вызывают припадки и не приветствуются.

jQuery теперь имеет официальный плагин цветной анимации:http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

1 голос
/ 04 ноября 2010

Похоже на работу для jQuery - в частности, для метода animate ():

http://api.jquery.com/animate/

0 голосов
/ 04 ноября 2010

Вы не можете напрямую анимировать цвет с помощью jQuery, так как «цвет» не является числовым свойством CSS.

Но вы можете сделать что-то вроде этого: Позвольте элементу A быть стилизованным, чтобы отразить состояние отсутствия наведения, и позвольте элементу B быть стилизованным, чтобы отразить состояние наведения, за исключением того, что с непрозрачностью установлено значение 0. Тогда абсолютно позиционируйте элемент Bнепосредственно над элементом A. Затем используйте методы jQuery fadeIn () и fadeOut (), чтобы изменить непрозрачность элемента B при наведении.

...