CODEWITHSUNDEEP
jqueryjquery-animatefade
Craig Jonathan Kristensen
Craig Jonathan Kristensen

Reputation: 737

Animate button background with Jquery

I am trying to fade-in a background image on a button on mouseover (and fade it out on mouseout), without the actual button text fading.

$('btn').hover(function () {
    $('btn', this).stop().animate({
        "opacity": 1
    });
}, function () {
    $('btn', this).stop().animate({
        "opacity": 0
    });
});

Example: http://jsfiddle.net/craigzilla/fFq2A

Upvotes: 0

Views: 488

Answers (2)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You have assigned div as button as well as background.so if you try to fadein/fadeout background,it'll fade in fade out both button and background....

Fiddle Demo

Here's the code:

$('.btn').hover(function () {
    $(this).stop().animate({"opacity": 0});
}, function () {
    $(this).stop().animate({"opacity": 1});
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

$('.btn').hover(function () {
    $(this).animate({
        "opacity": 0
    });
}, function () {
    $(this).stop().animate({
        "opacity": 1
    });
});

Your selector is wrong 'btn' should be '.btn' and $('btn', this) should be $(this).

Demo: Fiddle.

Upvotes: 1

Related Questions