CODEWITHSUNDEEP
jqueryhtmlcss
user3336090
user3336090

Reputation: 21

Animate background color

I am learning to use jquery to achieve this BUY IT button and this is my attempt so far:

Jquery:

$(document).ready(function(){

$("a").hover(

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

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

Upvotes: 1

Views: 78

Answers (2)

Siamak Motlagh
Siamak Motlagh

Reputation: 5146

jQuery internally doesn't have animation for color, but you can use jQuery UI library to add this feature to jQuery animate function.

jsFiddle Live Demo

You can download jquery-ui.min.js. So your code after including jQueryUI wont change.

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


EDIT: You need to animate the div up to down. I've written a simple example for you: jsFiddle Live Demo 

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

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1075457

jQuery doesn't animate colors. jQuery UI adds the ability to do so, or you can just use the plugin they use, or there are other standalone plugins that do it, but the base library does not.

Upvotes: 0

Related Questions