jQuery的動畫字體顏色上懸停

使用下面的代碼，試圖讓字體顏色上懸停，類似的動畫效果如何，我有底部邊框顏色動畫。改變邊界底色效果很好，但字體顏色似乎不會改變。一個完整的例子可以在這裏看到：http://www.buenolisto.com/alma。任何幫助是極大的讚賞。我也已經調用jQuery用戶界面與：https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js jQuery的動畫字體顏色上懸停

jQuery("li.social").hover(function() { 
jQuery(this).find("img").stop(true, true).animate({ 
    'marginTop': "-=20px" 
}, 'fast'); 
}, function() { 
jQuery(this).find("img").stop(true, true).animate({ 
    'marginTop': "+=20px" 
}, 'fast'); 
}) 
jQuery("li.reservas").hover(function() { 
jQuery(this).find("img").stop(true, true).fadeOut({ 
    'marginTop': "-=30px" 
}, 'slow'); 
}, function() { 
jQuery(this).find("img").stop(true, true).fadeIn({ 
    'marginTop': "+=30px" 
}, 'slow'); 
}) 
jQuery("ul.menu li").hover(function() { 
jQuery(this).find("a").stop(true, true).animate({ 
    'borderBottomColor': '#2E9ECE', 
    'color': '2E9ECE' 
}, 'slow'); 
}, function() { 
jQuery(this).find("a").stop(true, true).animate({ 
    'borderBottomColor': '#FFDF85', 
    'color': 'FFDF85' 
}, 'slow'); 
})

來源

2012-06-13 user1447958

通過看你的代碼，我可以告訴你忘了＃附近的CSS顏色，所以不是這個'color': '2E9ECE'使用本'color': '#2E9ECE'。您可能還需要在您的工作作風，我已經重寫你的最後懸停是這樣的：

$('ul.menu li a').hover(
    function() { 
     // do this on hover 
     $(this).animate({ 
      'borderBottomColor': '#2E9ECE', 
      'color': '#2E9ECE' 
     }, 'slow'); 
    }, 
    function() { 
     // do this on hover out 
     $(this).animate({ 
      'borderBottomColor': '#FFDF85', 
      'color': '#FEFEFE' 
     }, 'slow'); 
    } 
);

這，在我看來，是更具可讀性和更短。看看jQuery的API hover和animate

更新：我已經驗證，此代碼的工作（使用Firefox和Chrome的最新版本測試）：

<html>                 
<head>                 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
<script type="text/javascript">           
    $(function() { 
     $("a").hover(
      function() { 
       $(this).animate({ color: "#00ff00" }, 'slow'); 
      },function() { 
       $(this).animate({ color: "#ff0000" }, 'slow'); 
     }); 
    }); 
</script>                
</head>                 
<body>                 
    <a href="#">aaa</a><br /> 
    <a href="#">bbb</a><br /> 
</body>                 
</html>

來源

2012-06-13 15:47:50 Zbigniew

我想這個代碼如下，似乎還有一些問題。顏色正在變化，但不是我如何解析它們我希望在懸停時讓顏色動畫變成＃2E9ECE，並且在沒有懸停時恢復到#FEFEFE。我真的是新手，所以請耐心等待:) \t ** jQuery（'ul.menu li a'）。hover（function（）{jQuery（this）.stop（true，true）.animate（{' borderBottomColor'：'＃2E9ECE'，'color'：'＃2E9ECE'}，'slow'）;}，function（）{jQuery（this）.stop（true，true）.animate（{'borderBottomColor'：' FFDF85'，'color'：'#FEFEFE'}，'slow'）;}）; ** – user1447958

我已經編輯過我的帖子來匹配你的顏色，很簡單，只需要在API中循環。 – Zbigniew

我遇到的問題是我第一次將鼠標懸停在動畫不會啓動的元素上......但是如果我第二次在元素上方漫遊，則動畫將執行。然後我遇到了當前菜單項沒有顯示正確顏色的問題。 – user1447958

jQuery的動畫字體顏色上懸停

回答

相關問題