jquery - 动画背景颜色

Question

我正在学习使用 jquery 来实现这个 BUY IT button这是我到目前为止的尝试:

J查询:

$(document).ready(function(){

$("a").hover(

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

JSFiddle:http://jsfiddle.net/c3uwtyfg/

Answer 1

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);
      });
});