CODEWITHSUNDEEP
jqueryhtmlcssjquery-uijquery-animate
noname
noname

Reputation: 1318

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

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...

Upvotes: 6

Views: 49016

Answers (6)

Sujata Chanda
Sujata Chanda

Reputation: 3395

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

Upvotes: 1

Marcos V DeSousa
Marcos V DeSousa

Reputation: 21

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

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

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

Upvotes: 4

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

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

Upvotes: 11

Aneeez
Aneeez

Reputation: 1452

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/

Upvotes: 2

DGS
DGS

Reputation: 6025

You cannot animate non numerical properties with .animate()

Upvotes: 6

Related Questions