We help IT Professionals succeed at work.

Image transition and timer

Last Modified: 2013-11-19
Hi guys!

I have been working on image transition effects with javascript, especially opacity.
What I have is the following...

1 html file called test.html.
1 javascript file called blendtrans.js

Basically, on the test.html page, I have the following......

A blank page on load with a "Show/Hide" title.

When I click on the show/hide, it fades in an image into the page.
When I click on the show/hide a second time, it fades out the image.

What Id like to do, is the following.
a) On page load, nothing is displayed for 2 seconds.
b) After 2 seconds, the image automatically fades into the page and is viewable.
c) After 15 seconds, the image automatically fades out of the page.
d) Another 2 seconds, and the process repeats from step b).

Here is the code for both the html and javascript. Thank you.

============================================================== html
<script type="text/javascript" src="blendtrans.js"></script>
<img src="test.jpg" style="width: 936px; height: 267px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" alt="" />
<a href="javascript:shiftOpacity('blendimage', 1000)">show/hide</a>

=========================================================== blendtrans.js
function opacity(id, opacStart, opacEnd, millisec) {
      //speed for each frame
      var speed = Math.round(millisec / 100);
      var timer = 0;

      //determine the direction for the blending, if start and end are the same nothing happens
      if(opacStart > opacEnd) {
            for(i = opacStart; i >= opacEnd; i--) {
                  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
      } else if(opacStart < opacEnd) {
            for(i = opacStart; i <= opacEnd; i++)
                  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));

//change the opacity for different browsers
function changeOpac(opacity, id) {
      var object = document.getElementById(id).style;
      object.opacity = (opacity / 100);
      object.MozOpacity = (opacity / 100);
      object.KhtmlOpacity = (opacity / 100);
      object.filter = "alpha(opacity=" + opacity + ")";

function shiftOpacity(id, millisec) {
      //if an element is invisible, make it visible, else make it ivisible
      if(document.getElementById(id).style.opacity == 0) {
            opacity(id, 0, 100, millisec);
      } else {
            opacity(id, 100, 0, millisec);

function blendimage(divid, imageid, imagefile, millisec) {
      var speed = Math.round(millisec / 100);
      var timer = 0;
      //set the current image as background
      document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
      //make image transparent
      changeOpac(0, imageid);
      //make new image
      document.getElementById(imageid).src = imagefile;

      //fade in image
      for(i = 0; i <= 100; i++) {
            setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));

function currentOpac(id, opacEnd, millisec) {
      //standard opacity is 100
      var currentOpac = 100;
      //if the element has an opacity set, get it
      if(document.getElementById(id).style.opacity < 100) {
            currentOpac = document.getElementById(id).style.opacity * 100;

      //call for the function that changes the opacity
      opacity(id, currentOpac, opacEnd, millisec)
Thanks guys.

Watch Question

Unlock this solution and get a sample of our free trial.
(No credit card required)
Unlock this solution and get a sample of our free trial.
(No credit card required)


Phatzer and ed987!
You guys are brilliant.
I just tested both your ideas out and it works flawlessly.
Thank you so much.
ed987...this is exactly the thing im looking for.
Im going to allocated points now, but if its okay with you guys, Im going to post another question exactly related to this, just a bit more complex.
I will title the next question:
"Image transition and timer - polling a folder of images".
Thanks so much to both of you.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.