CODEWITHSUNDEEP
jquery
xzibit
xzibit

Reputation: 3487

Fading in images with Jquery

I am using this code in order to fade in and out background images on my site. 

var image = $('#image-holder');
    image.fadeOut(1000, function () {
        image.css("background", "url('images/design-" + newColor + ".jpg')");
        image.fadeIn(1000);
    });

but when I try:

  var image = $('#image-holder');
    image.fadeIn(1000, function () {
        image.css("background", "url('images/design-" + newColor + ".jpg')");
        image.fadeIn(1000);
    });

The FadeIn effect does not trigger, Any ideas why? I want the background image to fade in not out.

Upvotes: 0

Views: 51

Answers (3)

Denys Séguret
Denys Séguret

Reputation: 382150

You need your image to be initially hidden if you want it to fade in :

var image = $('#image-holder');
image.hide().fadeIn(1000, function () {
    image.css("background", "url('images/design-" + newColor + ".jpg')");
    image.fadeOut(1000); // I suppose you want fadeOut, right ?
});

Demonstration

Upvotes: 2

spojam
spojam

Reputation: 164

Maybe, promise with done,

var image = $('#image-holder');
image.fadeIn(1000, function () {
    image.css("background", "url('images/design-" + newColor + ".jpg')").promise().done(function() {
    image.fadeIn(1000);
    });
});

Upvotes: -1

user2957312
user2957312

Reputation:

First, you must use display:none; as opposed to opacity:0.

in order to be able to fadeIn something .

Upvotes: 0

Related Questions