background image slowly change transparancy

 
0
 

I have an image I would like to have it's transparancy change from 0 to 100% over about 5 seconds on page load. Any suggestions would be most appreciated. I just can't seem to get the css code right. Do I need to use javascript? Doesn't html5 do this easily?

Thanks/Hal

 
0
 

Yes, you can do this with javascript. However, its very easy to do with the jQuery library using the fadeIn() method.

Here's a simple example of using the fadeIn() method on a div. For an image, swap the div element for an image.

<!doctype html> <html> <head> <title>fadeIn</title> <style> span { cursor:pointer } #div1 { display: none; width: 100px; height: 100px; background: #ff0000; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<span id="clickMe">Click here...</span><br />
<div id="div1"></div>

<script>
$('#clickMe').click(function() {
  $("#div1").fadeIn(5000);
});
</script>

</body>
</html>
 
0
 

Thanks. But I am having trouble getting it to work. Probably because I am not familiar with jqueary. I want a div element to slowly fade in. I tried to put the function call in the body as an onload. Then I created the function with just the fadein part. Here is the basic idea of my code:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body onload='fadeItIn()'>

<div class="container">
  <div class="content">
  <div id='header'>
  ....
  </div>
  <div id='mainBody'>
  ....stuff to bring fadein....
  </div>
  <script>
function fadeItIn{
  $("#mainBody").fadeIn(5000);
};
</script>

Any help would be most appreciated.
Thanks/Hal

 
0
 

You dont have to call a function onload for the body element. Try this...

<!doctype html> <html> <head> <title>fadeIn</title> <style> #div1 { display: none; width: 250px; height: 250px; background: #ff0000; padding:10px; color: #ffffff; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="div1">This is content in #div1</div>
<script>
$( document ).ready(function() {
  $("#div1").fadeIn(5000);
});
</script>
</body>
</html>

Here is an example on jsFiddle.net

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: