動畫背景顏色

我正在學習使用jQuery來實現這個BUY IT button，這是我的嘗試至今：動畫背景顏色

的Jquery：

$(document).ready(function(){ 

$("a").hover(

function(){ 
    $("a").animate({'backgroundColor': '#3D977D'},400); 
}, 
function(){ 
    $("a").animate({'backgroundColor': '#367603'},400); 
} 
); 
});

的jsfiddle：http://jsfiddle.net/c3uwtyfg/

來源

2014-09-13 user3336090

jQuery內部沒有顏色動畫，但可以使用jQuery UI庫將此功能添加到jQuery動畫功能中。

jsFiddle Live Demo

您可以下載jquery-ui.min.js。所以你的代碼在包含jQueryUI後不會改變。

$(document).ready(function(){ 
    $("a").hover(
     function() { 
      $("a").animate({'backgroundColor': '#3D977D'},400); 
     }, function() { 
      $("a").animate({'backgroundColor': '#367603'},400); 
     } 
    ); 
});

編輯：您需要動畫的div升轉降。我寫了一個簡單的例子給你：jsFiddle Live Demo

$(function(){ 
     $('.btn').hover(function(){ 
     $(this).find('.cover').stop().animate({top:0},200); 
     },function(){ 
     $(this).find('.cover').stop().animate({top:-40},200); 
     }); 
});

來源

2014-09-13 09:31:18

謝謝，但這是我想實現的：http：///mobilehub.theshop.ph/mobilehub/Lg-G2-32gb/p-53e9e12cbc86751b52b5e715 – user3336090 2014-09-13 09:45:02

@ user3336090這完全是別的，它不是關於動畫顏色。這可以通過動畫div來完成。 – 2014-09-13 09:53:13

如果是這樣，怎麼樣？使用jquery ui製作動畫顏色是很酷的事，向我的同學吹噓一下哈哈 – user3336090 2014-09-13 10:03:29

jQuery的不動畫色彩。 jQuery UI adds the ability可以這樣做，或者您可以只使用the plugin they use，或者有其他獨立插件可以實現，但基本庫不會。

來源

2014-09-13 09:06:38

有人說，這完全是別的東西，它不是關於動畫的色彩，這是可以做到動畫一個div。這是我想實現的：http://mobilehub.theshop.ph/mobilehub/Lg-G2-32gb/p-53e9e12cbc86751b52b5e715（購買IT按鈕） – user3336090 2014-09-13 10:12:32

動畫背景顏色

回答

相關問題