CODEWITHSUNDEEP
jquery
Jemes
Jemes

Reputation: 407

jQuery FadeIn/Out Attributes

I would like to be able to modify the code below to fadeOut and then FadeIn the removal and adding of the style attribute from body_id.

I know I can fade the whole of body_id but I would like to animate the removal and adding of the style attribute only not everything inside the id itself?

$(".bg").click(function(){
var1 = $(this).attr('id');
loc = "background-image:url(" + var1 + ")"

$("#body_id").removeAttr("style").attr("style", loc + ";");
$.cookie('pageBG', loc,{ expires: 7, path: '/'});
return false;
});

Upvotes: 0

Views: 492

Answers (2)

Seth
Seth

Reputation: 6260

var $body_id = $('#body_id');

$body_id.fadeOut(function() {

    // This runs when the fadeOut is complete.
    $body_id.removeAttr('style').fadeIn();

});

Upvotes: 0

Yi Jiang
Yi Jiang

Reputation: 50125

Not really possible in this case, since we're talking about a background-image here, and there's no way to change the opacity of a background-image through CSS.

You can either change the master opacity (.fadeIn/.fadeOut) of the element or use a separate element positioned in the same position as the background and fade that instead.

Separate cleanup of your current code: 

$(".bg").click(function(){
    var bgUrl = this.id;

    $("#body_id").css('backgroundImage', bgUrl);
    $.cookie('pageBG', bgUrl, { expires: 7, path: '/'});

    return false;
});

Remember to change the part of your code that reads out the cookie too.

Upvotes: 1

Related Questions