Member Avatar for hlamster

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

  • 2 Contributors
  • 3 Replies
  • 279 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

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>
Edited by JorgeM
Member Avatar for hlamster

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

Member Avatar for JorgeM

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.