CODEWITHSUNDEEP
javascripthtmlimage
John Johnson
John Johnson

Reputation: 141

javascript change image slowly with fade using timer and opacity

i am looking for some help with this script i have been working on. here is my file fade.js the problem is with the changing, it is messed up. please help me find the problem and solution for this, thanks.

JS-file

//image fade script
var opacity = 0;
function changeimg(currentimage){

rnumb = Math.floor(Math.random()*2);
var newimage = "./images/" + rnumb + ".jpg";
if (newimage !== currentimage)
{
document.getElementById("fadeImg").src= newimage;
}


}
function fadein()
{
       var fadeImg = document.getElementById('fadeImg');

       var browserName=navigator.appName;

       if(browserName=="Microsoft Internet Explorer")
       {

              browserOpacity = opacity / 10;

              fadeImg.filters.alpha.opacity = browserOpacity;

       }
       else
       {

              browserOpacity = opacity / 1000;

              fadeImg.style.opacity = browserOpacity;

       }

       if(opacity < 1000)
       {

              initiate();

       }
else if(opacity == 1000)
{
changeimg(document.getElementById("fadeImg").src);
opacity = 0;
}

}


function initiate()
{

       opacity++;
       setInterval("fadein()", 500);

}

index.html

<script type="text/javascript" src="fade.js"></script>
<body onload="initiate()">
<img id="fadeImg" src="images/1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/>
</body>

JS-fiddle

Here is a Fiddle of the code as well: http://jsfiddle.net/epqKr/2/ (Notice that the code, as it is in the fiddle, may make your browser freeze after a while.

Upvotes: 2

Views: 7010

Answers (3)

John Johnson
John Johnson

Reputation: 141

i am working on this still, heres what i have now: it doesnt work whatsoever but it looks better. html

<html>
<head>

<script type="text/javascript" src="fade1.js"></script>

</head>

<body onload="fadetimer()">
<img id="fadeImg" src="1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/>
</body>

</body>
</html>

script

    //image fade script
var opacity = 0;

function changeimg(currentimage){

rnumb = Math.floor(Math.random()*2);
var newimage = rnumb + ".jpg";
if (newimage !== currentimage)
{
document.getElementById("fade").src= newimage;
}

}
function fadein()
{
       var fade = document.getElementById('fade');

if(fade.filters.alpha.opacity >= 100 || fade.style.opacity >= 1.0)
{

changeimg(fade.src);
fade.filters.alpha.opacity = 0;
fade.style.opacity = 0;

} 
else 
{
              fade.filters.alpha.opacity += 10;
              fade.style.opacity += 0.1;

       }


}


function fadetimer()
{
setInterval("fadein()", 500);
}

Upvotes: 1

veritasetratio
veritasetratio

Reputation: 611

  • Don't call initiate() from within the fadeIn() function, instead just increment your opacity control variable (i.e, opacity += 1;).

  • You will probably want to save your setInterval return value to kill the callbacks when you have finished your animation.

  • You also probably will want to increase the animation speed by lowering the interval.

    animId = setInterval("fadeIn()", 5);

Upvotes: 1

A_nto2
A_nto2

Reputation: 1096

I think you should use a cross-browser library to accomplish things like this. Microsoft Internet Explorer, especially in versions < 9, is most likely to not behave as you would expect it does, particularly when you try to use functions which makes use of opacity, alpha-filter and timing. You could try to use jQuery, or Prototype, or MooTools and such frameworks. They all make what you're looking for in simple, secure, better way.

Upvotes: 1

Related Questions