CODEWITHSUNDEEP
javascriptjquerycss
Tigran
Tigran

Reputation: 1057

Hover animation fail

I am doing animation effect on buttons, but it does not work as should. It shoudl slowly show color on hover and slowly return to normal when mouse leave.

I took an example from jQuery Animate text-color on hover

Here is jsfiddle: http://jsfiddle.net/eTymf/1/

$('.buttons').hover(
            function() {
                console.log(this);
                // do this on hover
                $(this).animate({
                    'borderBottomColor': '#2E9ECE',
                    'background-color': '#2E9ECE'
                }, 'slow');
            }, 
            function() {
                // do this on hover out
                $(this).animate({
                    'borderBottomColor': '#FFDF85',
                    'background-color': '#FEFEFE'
                }, 'slow');
        });

Upvotes: 1

Views: 154

Answers (6)

jacquard
jacquard

Reputation: 1307

Normal Jquery animation properties only take in a number. For color strings to work,you need the jquery color plugin.

Include the jquery Color plugin.

Upvotes: 0

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Try using .css instead of .hover

Demo

jQuery

//menu cool animation
$('.buttons').hover(

function () {
    console.log(this);
    // do this on hover
    $(this).css({
            'background-color': '#2E9ECE'
    }, 'slow');
},

function () {
    // do this on hover out
    $(this).css({
            'background-color': '#FEFEFE'
    }, 'slow');
});

Upvotes: 0

Rakesh Kumar
Rakesh Kumar

Reputation: 2855

We can do it by css as well.

Add below code to your css

.buttons{
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -ms-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
}

Working example: Demo

jQuery SOlution: Demo

$('.buttons').mouseover(function() {
        // do this on hover
        $(this).animate({
            'background-color': '#000000',
            'color': '#2E9ECE'
        }, 'slow');
    })
.mouseleave(
    function() {
        // do this on hover
        $(this).animate({
            'background-color': '#fff',
            'color': '#333333'
        }, 'slow');
    });

Upvotes: 1

jakealbaugh
jakealbaugh

Reputation: 246

if you really want to use jQuery:

background color animation is not a part of the .animate() method. you need something like the jQuery color animation plugin http://www.bitstorm.org/jquery/color-animation/ or jQuery UI like Nick G suggested.

also, you'll have to change background-color to backgroundColor

Upvotes: 2

BassT
BassT

Reputation: 849

You could use .mouseenter() and .mouseleave() instead for the 2 different events.

Upvotes: 0

Nick Grealy
Nick Grealy

Reputation: 25942

Your code is perfect, you just need to include the JQuery UI library...

JQuery UI library and CSS included.

And here is the updated example: http://jsfiddle.net/nickg1/eTymf/4/

Upvotes: 2

Related Questions