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

Recommended Answers

All 3 Replies

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>

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

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.