試圖緩和效果添加到jQuery的標籤

我嘗試通過jQuery的緩動/褪色的標籤效應。我將如何爲現有的代碼添加緩動效果。另外，如何添加兩個CSS類，以便背景顏色和顏色本身一起改變？謝謝。試圖緩和效果添加到jQuery的標籤

Jquery的：

$(document).ready(function() { 

     var origColor = $("#links-top-contact a").css("color"); 

     $("#links-top-contact a").hover(function() { 

      $(this).css({color:'blue'}); 

     },function() { 

      $(this).css({color:origColor}); 

     }); 

    })

; CSS

#links-top-contact a{ 
    color:#fff; 
    font-size:30px; 
    text-decoration:none; 
    border:1px solid blue; 
    padding:-5px 10px 10px 10px; 
    margin-top:20px; 
    margin-left:20px; 
    border-radius:25px; 
    -moz-border-radius:25px; 
    -webkit-border-radius:25px; 
    -khtml-border-radius:25px; 
    background-color:red; 
    }

HTML：

<br/><div id="links-top-contact"><a href="#">yo</a></div>

This是的jsfiddle。

來源

2011-08-10 Graham

如何jquery color plugin？ Here你可以找到它如何工作的例子。

我更新了jsFiddle所以你可以看到它的工作。

在您的例子將是這樣的：

var origColor = $("#links-top-contact a").css("background-color"); 

$("#links-top-contact a").hover(function() { 
    $(this).animate({ 
     backgroundColor: 'blue' 
    }, 500); 
}, function() { 
    $(this).animate({ 
     backgroundColor: origColor 
    }, 500) 
});

來源

2011-08-10 08:59:06

代碼是錯誤的，它既懸停動畫，也沒有休假。此外，這排隊所有的動畫，以便它不斷變化，如果你在很短的時間內多次翱翔 – Fender

真棒謝謝你！我怎麼能阻止它。那麼，它會對mouseOver和mouseOut起作用嗎？我需要使用$ .noop（）變量嗎？ – Graham

JUST FIXED IT，check（jsfiddle too） –

看看這個jQuery插件。我認爲這是你需要的。

http://plugins.jquery.com/project/animate-to-class

來源

2011-08-10 08:43:12 Fender

我可以添加兩個類，如$（本）的.css（{顏色： '藍'}）動畫（{} .... ）;另外，如何添加插件？我剛用完整的jQuery庫下載。 – Graham

要使用插件，你只需將它包含在你的html頭像jquery庫中。但是你必須先包含jquery！是的，你可以那樣做'$（本）的.css（{顏色：「藍」}）動畫（{...}）;''但顏色：blue'不會被動畫 – Fender

您可以修改背景色爲好。

$(this).css({color:'blue',backgroundColor:'green'});

爲了更方便您可以使用CSS：懸停pseudoselector修改文本/背景顏色，而不是從jQuery的這樣做的。

緩和/衰落看看jQuery的動畫和淡入淡出：jQuery Effects

來源

2011-08-10 08:44:13 Sleeperson

不工作。看看這裏：http://jsfiddle.net/HBaVS/22// – Graham

這是工作，但你必須寫'backgroundColor' http://jsfiddle.net/MANQZ/1/ – Fender

編輯THX擋泥板 – Sleeperson

試圖緩和效果添加到jQuery的標籤

回答

相關問題