-1

I want to change the background image of a container using the animate of jQuery. I tried this but it doesn't work and there are no compilation errors:

$("#main-container").animate(
{"background-image": 'url("images/background2.png")'},2000);

I can do it with the css but I want the animate effect.

$("#main-container").css(
{"background-image": 'url("images/background2.png")'});

Any idea why this is happening?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Avraam Mavridis
  • 8,698
  • 19
  • 79
  • 133
  • How about animating the opacity of `#main-container` instead? – Digzol Mar 25 '14 at 13:42
  • @Digzol its not what I want to do. I can change the opacity, it works, but I want to change the image. – Avraam Mavridis Mar 25 '14 at 13:43
  • Animating an URL, what would you expect as result??? Please check DOC to see how is supposed to work jQuery `animate()` method. And please read: http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem – A. Wolff Mar 25 '14 at 13:48
  • You are trying to do something that jQuery doesn't support. `animate` works on numerical values (as well as the constants `hide` and `show`). – Niels Abildgaard Mar 25 '14 at 14:30

5 Answers5

0

There is no animation for background-image in jQuery ( I'm not sure about the UI ) but you may can achieve this effect with css transition. Try give a transition with 2 seconds and an ease, it should apply this effect in every changes in the element ( don't forget the crossbrowser issue)

http://www.w3schools.com/css/css3_transitions.asp

You can also make it happen animating a fade out, changing the image and then animate a fade in 

$("#main-container").animate({opacity: 0}, 1000, function(){
$(this).css({"background-image": 'url("images/background2.png")').animate({opacity:1},{duration:1000})
});
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
nach
  • 349
  • 1
  • 3
  • 10
0

Html:

<div id="main-container"></div>

Css:

 #main-container{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

JQuery:

$('#main-container')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': 'url(images/background2.png)'})
            .animate({opacity: 1});
    });

For further reference please see the below link.

How do I change the background image using jQuery animation?

Community
  • 1
  • 1
RGS
  • 5,131
  • 6
  • 37
  • 65
0

You can use CSS transition:

CSS:

#bgDiv {
    width: 250px; 
    height: 250px;
    /* For Safari 3.1 to 6.0 */
    -webkit-transition-property:background-image;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0s;
    /* Standard syntax */
    transition-property: background-image;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0s;
}

.background1 {
    background-image: url("http://lorempixel.com/output/abstract-q-c-250-250-5.jpg");
}

.background2 {
    background-image: url("http://lorempixel.com/output/nature-q-c-250-250-7.jpg");
}

HTML:

<script>
    function backgroundChange(){
    $("#bgDiv").removeClass("background1").addClass("background2");
    };
</script>
<p onclick="backgroundChange()">Click Me</p>
<div id="bgDiv" class="background1"></div>

I created a sample for you: http://jsfiddle.net/CjL7r/

mahega
  • 3,231
  • 4
  • 20
  • 32
0

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

But a way to get the solution.Reference

A working demo

setTimeout(animate, 2000);

function animate() {
    $('#main-container').animate({}, 'fast', function () {
        $(this).css({
            'background-image': 'url(https://i.stack.imgur.com/7YKUD.jpg)'
        });
    });
}
Community
  • 1
  • 1
Bhavik
  • 4,836
  • 3
  • 30
  • 45
0

use jQuery plugin for color manipulation and animation support : https://github.com/jquery/jquery-color

jQuery animate() method on backgroundColor will not work without this plugin.

shadi
  • 113
  • 1
  • 9