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 anim开发者_StackOverflow中文版ate 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;
});

---

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.

---

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

$body_id.fadeOut(function() {

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

});