Animate button background with Jquery

Question

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

Your selector is wrong `'btn'` should be `'.btn'` – Arun P Johny Jan 30 '13 at 15:08 — Arun P Johny, Jan 30 '13 at 15:08

Arun P Johny · Answer 1 · 2013-01-30T15:14:09.633

1

$('.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.

edited Jan 30 '13 at 15:14

answered Jan 30 '13 at 15:06

Arun P Johny

384,651
66
527
531

Is there any way to just affect the background and NOT the text? – Craig Jonathan Kristensen Jan 30 '13 at 15:22
No, `opacity` always affect the element and its children. The normal approach to solve this problem is to use absolute positioning of elements. You can read some solutions in the following links http://stackoverflow.com/questions/10021302/how-to-apply-an-opacity-without-affecting-a-child-element-with-html-css / http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ / http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ – Arun P Johny Jan 30 '13 at 15:37

score 1 · Answer 2 · answered Jan 30 '13 at 15:17

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

Animate button background with Jquery

2 Answers2