jQuery to change (with fade animation) background image of div on hover

Question

I am trying to change the background image of a div on hover with jQuery. This is what I came up so far, however, it's not working:

html

<div class="logo"></div>

css

.logo {
 width: 300px;
 height: 100px;
 background: url('http://placehold.it/300x100/ffffff/000000.png&text=first') no-repeat center top;
}

js

$('.logo').hover(
    function(){
        $(this).animate({backgroundImage: 'http://placehold.it/300x100/ffffff/000000.png&text=second'},'fast');
    },
    function(){
        $(this).animate({backgroundImage: 'http://placehold.it/300x100/ffffff/000000.png&text=first'},'fast');
});

jsfiddle here: http://jsfiddle.net/26j6P/1/

What am I doing wrong? If I animate the background color, it works just fine...

jQuery's animate doesn't work with images. You'll need to use css and transitions to get this to work. — Reinstate Monica Cellio, Sep 12 '13 at 08:43
have a look here http://stackoverflow.com/questions/4630947/how-do-i-change-the-background-image-using-jquery-animation — BeNdErR, Sep 12 '13 at 08:44
it would be better to just do the hover in css .logo:hover {/*new img here*/} if you really want to user jQuery try with fadeIn(), fadeOut() and not animate — caramba, Sep 12 '13 at 08:45
Thanks for the head-up. I never thought that jQuery's animate will not work with images... — noname, Sep 12 '13 at 09:48

score 11 · Accepted Answer · edited Aug 17 '17 at 04:56

11

You can't use jQuery's animate with images - it just doesn't work.

Use plain css, like this...

http://jsfiddle.net/26j6P/9/

Here's the css...

.logo {
    width: 300px;
    height: 100px;
    background: url('http://placehold.it/300x100/ffffff/000000.png&text=first') no-repeat center top;
    transition: 0.5s;
}
.logo:hover {
    background-image: url('http://placehold.it/300x100/ffffff/000000.png&text=second');
}

edited Aug 17 '17 at 04:56

Alexis Wilke

19,179
10
84
156

answered Sep 12 '13 at 08:47

Reinstate Monica Cellio

25,975
6
51
67

@TusharGupta I didn't down-vote you. After checking your example though, it's not what the OP is asking for. – Reinstate Monica Cellio Sep 12 '13 at 08:52
oh sorry i thought it was you sorry again :) – Tushar Gupta - curioustushar Sep 12 '13 at 08:55
Hmm, I was overthinking again :) Thanks @Archer. – noname Sep 12 '13 at 09:47
This only works on Chrome. background-image animation is not officialy included in W3C. – Juan Oct 09 '17 at 14:14

score 6 · Answer 2 · answered Sep 12 '13 at 08:44

6

You cannot animate non numerical properties with .animate()

answered Sep 12 '13 at 08:44

DGS

6,015
1
21
37

Thank you for your constructive answer. – noname Sep 12 '13 at 09:47

score 4 · Answer 3 · edited Aug 17 '17 at 05:03

4

DEMO

$('.logo').hover(

    function () {
        $(this).animate({
            opacity: 0
        }, 'fast', function () {
            $(this)
                .css({
                    'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=second)'
                })
                .animate({
                    opacity: 1
                });
        });
    },

    function () {
        $(this).animate({
            opacity: 0
        }, 'fast', function () {
            $(this)
                .css({
                    'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=first)'
                })
                .animate({
                    opacity: 1
                });
        });
});

edited Aug 17 '17 at 05:03

Alexis Wilke

19,179
10
84
156

answered Sep 12 '13 at 08:48

Tushar Gupta - curioustushar

58,085
24
103
107

That's not what animate does (or would do if it worked for images). The OP is looking for one background image fading into another, not fading out first. – Reinstate Monica Cellio Sep 12 '13 at 08:57
That's correct. Although Tushar's solution works well, I don't like fading-out / fading-in, I would prefer fading from one image to the other. – noname Sep 12 '13 at 09:44

score 2 · Answer 4 · answered May 13 '15 at 05:47

2

I know I'm a bit late. But if there's anyone who needs to do this, there's a jquery plugin for that. Go to the following link, scroll down to demos, and choose Using Backstretch as a slideshow. It works fine.

http://srobbin.com/jquery-plugins/backstretch/

answered May 13 '15 at 05:47

Aneeez

1,422
3
15
20

Not bad! Thanks for contributing. – noname May 14 '15 at 07:44

score 1 · Answer 5 · edited Aug 17 '17 at 05:09

1

Try doing this:-

$('.logo').hover(
    function() {
        $(this).css("background-image",
                    "url(http://placehold.it/300x100/ffffff/000000.png&text=second)"); 
    },
    function() {
        $(this).css("background-image",
                    "url(http://placehold.it/300x100/ffffff/000000.png&text=first)"); 
    }
);

edited Aug 17 '17 at 05:09

Alexis Wilke

19,179
10
84
156

answered Sep 12 '13 at 09:15

Sujata Chanda

3,355
2
21
35

This is working, but it's not fading... I need something less aggressive, with a fade... – noname Sep 12 '13 at 09:45

score 1 · Answer 6 · edited Aug 17 '17 at 05:06

1

I saw someone saying you can't do it with jQuery, well here is my example and it works. $(".bannerImages img") is calling my image directly, so we can change its attribute using $(this). Once that's done you can call $(this) and change its attr, and also add an animation.

$(".bannerImages img").animate({opacity: 0}, 'slow', function() {
     $(this)
         .attr({'src': 'images/mainSlider/ps1.jpg'})
         .animate({opacity: 1});
});

edited Aug 17 '17 at 05:06

Alexis Wilke

19,179
10
84
156

answered Mar 07 '16 at 18:26

Marcos V DeSousa

21
1

Two problems: he wants to fade one image over the other and also he has background images, not an `` tag. – Alexis Wilke Aug 17 '17 at 05:07

jQuery to change (with fade animation) background image of div on hover

6 Answers6

Linked