Fading on CSS id to another on page load

Question

On page load, I want to fade in a CSS id and then after a few seconds I want to fade to another CSS id. Anyone know what jquery code I would use for this?

These are the two id's

#background {
background: url("images/am_photography_bg.jpg") no-repeat center -25px fixed;
background-size: 100%;
height: 100vh;
}

#background-blured {
background: url("images/am_photography_bg_blured.jpg") no-repeat center -25px fixed;
background-size: 100%;
height: 100vh;
opacity: .5;
}

and this is my html

<html>
<head>
</head>
<body>
<section>
    <div id="background"></div>
</section>
</html>

Any ideas?

I tried adding this code to my existing jQuery:

    $("#background").delay(1500).animate({
    background: url("images/am_photography_bg_blured.jpg") no-repeat center -25px fixed,
    opacity: .5,
}, 1000, function() {
    // Animation complete.
});

To make it this all together:

$(document).ready(function() {

$('body').css('display', 'none')
$('body').fadeIn(1500);

$("#background").delay(1500).animate({
    background: url("images/am_photography_bg_blured.jpg") no-repeat center -25px fixed,
    opacity: .5,
}, 1000, function() {
    // Animation complete.
});

$("h1").delay(2000).animate({
    top: -30,
    opacity: 1,
}, 700, function() {
    // Animation complete.
});

$('.link').click(function() {
    event.preventDefault();
    newLocation = this.href;
    $('body').fadeOut(500, newpage);
});
});

function newpage() {
    window.location = newLocation;
}

But it breaks.

`setTimeout(function () { $("#background").attr("id", "background-blured"); }, 2000);` will be more effective in your case. — vivekkupadhyay, Sep 17 '15 at 07:51
While the question might be vague. In these questions, it would be easier, if you would describe your end-product. Btw, your body is not closed. — Kalle H. Väravas, Sep 17 '15 at 07:58
Have you tried using css *classes*? Much easier to use that trying to change the ID which appears to be what you're trying to do. — freedomn-m, Sep 17 '15 at 08:34
If you're ok using jquery-ui, then have a look at [this question](http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles) — freedomn-m, Sep 17 '15 at 08:37

score 2 · Accepted Answer · answered Sep 17 '15 at 07:54

Something like this?

  $('#background').addClass('background');

setTimeout(function() {
  $('#background').addClass('background-blured');
}, 2000);

  .background {
 background: blue url("images/am_photography_bg.jpg") no-repeat center -25px fixed;
 background-size: 100%;
 height: 100vh;
    }

    .background-blured {
    background: red url("images/am_photography_bg_blured.jpg") no-repeat center -25px fixed;
    background-size: 100%;
 height: 100vh;
    opacity: .5;
    }

#background {
   transition: all 2s ease-in-out;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

 <section>
  <div id="background" class="background"></div>
 </section>

Okay so this did work but now when using the css transition it kinda brakes and does a wonky thing. Anyway to do this purely with jquery? — Adam Ogden, Sep 18 '15 at 05:19

score 1 · Answer 2 · answered Sep 17 '15 at 08:11

you may use this:

$(document).load(function(){
    $("#background").fadeIn();
    setTimeout(change_bg() , 3000); //set time that after which, change_bg() will be executed.
});

function change_bg()
{
    $("#background").fadeOut();
    $("#background-blured").fadeIn();
}

Fading on CSS id to another on page load

2 Answers2