Question

我正在学习使用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/

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

Answer 2

jQuery没有动画颜色。 jQuery UI adds the ability这样做，或者你只能使用the plugin they use，或者有其他独立的插件可以做到这一点，但基础库没有。

动画背景颜色

2 个答案: