1,105,197 Community Members

background image slowly change transparancy

Member Avatar
hlamster
Newbie Poster
18 posts since Apr 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
JorgeM
IT Addict
6,383 posts since Dec 2011
Reputation Points: 567 [?]
Q&As Helped to Solve: 953 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
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>
Member Avatar
hlamster
Newbie Poster
18 posts since Apr 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
JorgeM
IT Addict
6,383 posts since Dec 2011
Reputation Points: 567 [?]
Q&As Helped to Solve: 953 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
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 three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: