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

回答1:

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

回答2:

You cannot animate non numerical properties with .animate()

回答3:

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

回答4:

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/

回答5:

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

回答6:

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

来源：https://stackoverflow.com/questions/18759402/jquery-to-change-with-fade-animation-background-image-of-div-on-hover