CODEWITHSUNDEEP
jquery
wpdesign
wpdesign

Reputation: 37

JQuery, fade in background pic on click

I want background images to fade in "on click" and here is what i got right now. And it´s working, but i want the images to fade-in on click...

$(document).ready(function() {
//this represents window.load in javascript.

//now to select the element suppose you have anchor tag <a> with id=clickme

$("#test").click(function() {

//select the element whose background image you want to change. suppose with id=imgBack
$("body").css({'background-image':'url(url to image)'}); 


})
});

Upvotes: 0

Views: 543

Answers (2)

Pavel Strakhov
Pavel Strakhov

Reputation: 40492

Here is live example.

HTML:

<body>
  <div id="no_background"></div>
  <div id="wrapper">
    <!-- page content goes here -->
    <input type="button" id="test" value="Show background">  
  </div>
</body>

CSS:

body {
  background: url(/path/to/background.png);
}

#no_background {
  background: white;    
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#wrapper {
  position: relative;
  z-index: 2;
}

JS:

$("#test").click(function() {
  $("#no_background").fadeOut();
});

Upvotes: 0

ninja
ninja

Reputation: 2263

You will need to create a div, and have the backgrund-image there, then have it set as display:none;

then on your click function you do this

$('#wrapperdiv').fadeIn();

in the fadeIn() function you can pass in a number telling it how fast you want it to fade in (in milliseconds) so if you want it to animate for 400ms, you would write it like this .fadeIn(400);

Upvotes: 1

Related Questions