Ссылка анимированного цвета меняется в jQuery? - PullRequest
Новая
       13

Ссылка анимированного цвета меняется в jQuery?

0 голосов
/ 10 сентября 2010

У меня есть ссылка с именем # link.

Он меняет цвет после наведения, например: 

$("#link").hover(function(){
     $(this).css({color: '#fed900'});
});

Все, что я хочу сделать, - это плавное, анимированное изменение цвета.

Я знаю, что должен как-то поместить .css в .animation, но не могу понять, как.

Я думаю, что это правильный путь, но он совсем не работает: 

$("#link").hover(function(){
     $(this).animate( { css({color: '#fed900'}) }, "slow" );
});

Я тоже так пробовал: 

$(this).animate({ .css({color: '#fed900'}), "slow" });

Но я все равно как-то не прав.Любая рука помощи?Я знаю, что упускаю что-то очень маленькое.

Ответы [ 5 ]

6 голосов
/ 10 сентября 2010

Звонок на .animate() выглядит так: 

$("#link").hover(function(){
  $(this).animate({ color: '#fed900'}, "slow");
}, function() {
  $(this).animate({ color: '#000000'}, "slow"); //original color
});

Вы можете попробовать здесь . Но имейте в виду, что вам необходимо включить плагин цвета или jQuery UI , поскольку ядро ​​jQuery не поддерживает цветную анимацию.

4 голосов
/ 09 января 2012 
$("#link").hover(function(){ 
  $(this).stop().animate({ color: '#fed900'}, "slow"); 
}, function() { 
  $(this).stop().animate({ color: '#000000'}, "slow"); //original color 
});

используйте .stop () для предотвращения проблем с цикличностью анимации

0 голосов
/ 17 февраля 2014

Я нашел один веб-сайт, который отлично использует анимационные эффекты JQuery.Ниже вы найдете несколько хороших примеров, которые могут решить все ваши вопросы.Для этого вам могут потребоваться браузеры последней версии.

http://e -weddingcardswala.in / e_cardscollection / 841 /

http://e -weddingcardswala.in /e_cardscollection / 840 /

Спасибо.

0 голосов
/ 22 апреля 2013

У меня эта проблема уже давно. к сожалению все вышеперечисленные решения терпят неудачу 

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px',
color:"#ffffff"
    });
  });
});
</script> 
</head>

<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

как бы я ни указывал в параметре, цвет не изменится ПРИМЕЧАНИЕ: библиотека jquery ui также была импортирована

0 голосов
/ 10 сентября 2010

у вас есть блуждающий css({}), вызов должен выглядеть следующим образом: 

$("#link").hover(function(){
     $(this).animate( {color: "#fed900"}, "slow" );
});
...