javascript - JQuery：悬停时的文本颜色切换

Question

可能很简单，只是尝试在将鼠标悬停在 div 上时为文本的颜色设置动画。到目前为止对 SO 进行了研究，但如果有人能指出我正确的方向，那就太棒了。目前这什么都不做，也不会向控制台抛出任何错误：

$('#homenav .homenavimg').hover(function (){
    $('#homenav h1').toggle(function() {
       $(this).animate({ color: "#FF0000" }, 1000);
    }, function() {
       $(this).animate({ color: "#000000" }, 1000);
    });
});

提前致谢！（PS：我有链接到 JQuery 和 UI 设置好）

Answer 1

如果您提供了您的标记，那会很棒，但请检查一下。可能你正在寻找这样的东西

http://jsfiddle.net/j6AeZ/2/

$('#homenav .homenavimg').hover(function (){
$('#homenav h1').stop().animate({ color: "#FF0000" }, 1000);
  }, function() {
  $('#homenav h1').stop().animate({ color: "#000000" }, 1000);
});​

Answer 2

$('#homenav .homenavimg').hover(function (){
    $('#homenav h1').stop().animate({ color: "#FF0000" }, 1000);
 }, function() {
    $('#homenav h1').stop().animate({ color: "#000000" }, 1000);
});

没必要用.toggle()，反正你之前用错了。

JSfiddle：http: //jsfiddle.net/uArDu/2/

Answer 3

如果有人有兴趣将其转换为导航样式效果（即适用于多个 h1），请执行以下操作：

$('#homenav .homenavimg').hover(function (){
$(this).find('h1').stop().animate({ color: "#53799E" }, 250);
 }, function() {
  $(this).find('h1').stop().animate({ color: "#F58426" }, 250);
});