freeufcdotinfo
Power Member
- Jun 12, 2008
- 685
- 157
I have a script that rotates several images, but I need them to fade, does anyone know how to do this.
Javascript image rotator
- Thread starter freeufcdotinfo
- Start date
nocare
Junior Member
- Apr 29, 2013
- 168
- 81
Two ways for ya, assume this is a "rotator" meaning image A appears, then B, then C, etc.
The older method I learned way back:
Loop over and change the opacity until one is zero, and one is 100, using a timer with an interval.
You then increment and decrement. If your simply replacing the image url, you'll need to do this differently, but shouldn't be too complex.
You'll need to terminate the timer when the values reach 0 and 100%, but I can't remember how to in javascript offhand.
Another option is to just use jQuery's .fade() function, which is quite handy and stupid easy to use
The older method I learned way back:
Loop over and change the opacity until one is zero, and one is 100, using a timer with an interval.
You then increment and decrement. If your simply replacing the image url, you'll need to do this differently, but shouldn't be too complex.
Code:
var curImage = document.getElementBuId('imageCurrent');
var nexImage = document.getElementBuId('imageNext');
var timeIncrement=50;
var fadeIncrement=5;
var timer = setInterval( function()
{
curImage.style.opacity = curImage.style.opacity - fadeIncrement;
nexImage.style.opacity = nexImage.style.opacity + fadeIncrement;
}, timeIncrement );You'll need to terminate the timer when the values reach 0 and 100%, but I can't remember how to in javascript offhand.
Another option is to just use jQuery's .fade() function, which is quite handy and stupid easy to use
Last edited:
gregevskye
BANNED
- Jul 15, 2013
- 308
- 37
Most like CSS opacity is used for fade between 0 to 1. You can select opacity level according to your desire either 0.2, 0.5 or whatever. In javascript declare the image as variable and then using DOM method access the image and use stye.opacity code.