jQuery字體顏色動畫懸停不起作用

我正在使用以下代碼嘗試將我的導航鏈接的字體顏色設置爲懸停/關閉懸停時的動畫效果。邊框底部顏色正確改變，但字體顏色不改變。它也拋出了我的當前菜單項CSS規則的不同顏色。希望的行爲是在懸停時字體顏色變爲藍色，然後恢復爲關閉懸停的白色，除非它是當前菜單項，應爲字體顏色黃色。我是這個新手，所以請原諒我缺乏風格。我已經包含了顏色支持的jQuery UI文件。任何幫助是極大的讚賞。完整的例子可以在這裏http://www.buenolisto.com/alma jQuery字體顏色動畫懸停不起作用

看到JS

 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 a').hover(function() { 
     jQuery(this).stop(true, true).animate({'borderBottomColor': "#2E9ECE",'color': "#FEFEFE"}, 'slow'); 
    }, function() { 
     jQuery(this).stop(true, true).animate({'borderBottomColor': "#FFDF85",'color': "#2E9ECE"}, 'fast'); 
    })

來源

2012-06-15 user1447958

在你的代碼無處你正在玩的字體顏色屬性 – 2012-06-15 12:40:38

請您可以嘗試隔離導致該問題的代碼，也許在[的jsfiddle（http://jsfiddle.net/）？你的問題中的一些jQuery事件與問題無關（例如'li.social'事件綁定是針對你的社交圖標而不是菜單的。 – andyb

@Somebodyisintrouble我認爲''color'：「＃2E9ECE 「'.animate（）''會不同意你 – andyb

回答關於字體顏色的一部分。顏色是錯誤的方式！

'color':'#2E9ECE'應該在.hover()和#FEFEFE之內的第一個函數應該在第二個函數中。

全更新的代碼應該是：

jQuery('ul.menu li a').hover(function() { 
    jQuery(this).stop(true, true).animate({borderBottomColor:'#2E9ECE', color:'#2E9ECE'}, 'slow'); 
    Cufon.refresh(this); 
}, function() { 
    jQuery(this).stop(true, true).animate({borderBottomColor:'#FFDF85', color:'#FEFEFE'}, 'fast'); 
    Cufon.refresh(this); 
})

注：隨着animate({})語法，你並不需要引用的屬性。

編輯：

爲了從懸停的代碼，你可以更新jQuery選擇排除當前選擇的菜單項到.not()包括與當前菜單項列表項：問題的第二部分類

jQuery('ul li a:not(.current-menu-item)').hover(...)

應該修復問題的第二部分。

編輯2：由於您使用Cufon渲染字體，則需要刷新設置使用jQuery否則會在色彩渲染後的文本原是（這是白色）。向兩種方法添加Cufon.refresh(this);可能會產生一些影響，但由於您未提供可編輯的源代碼，因此我無法對其進行測試。

這個閱讀後，我不認爲的Cufón字體可以動畫 - 見https://groups.google.com/forum/?fromgroups#!topic/cufon/RFfz6DDY0wU所以你應該要麼使用CSS3 fonts，它可以是動畫或保留的Cufón字體和簡單的讓字體的顏色變化從白色到藍色懸停，而不是動畫。

來源

2012-06-15 12:59:28 andyb

我已經採取了您的建議，並使用提供的代碼，實際上這是我原來的方式。但行爲仍然錯誤。現在發生的情況是，字體顏色在懸停時不會動畫/變化（保持灰白色），並且在鼠標懸停時變爲藍色。顯然，當前菜單項是一個不同的問題，並且仍然存在問題......請發送上面提供的站點鏈接以獲取當前行爲的示例。感謝你的協助。 – user1447958

其實，我不認爲字體顏色可以動畫，因爲它不是真正的字體。您正在使用存在於我的瀏覽器中的Cufon字體作爲'

Andy我很欣賞這種洞察力，並感謝您對此進行調查。你能描述在哪裏插入cufon刷新語句。我將在早上對此進行試驗。乾杯! – user1447958

jQuery字體顏色動畫懸停不起作用

回答

相關問題