Why not just skip the delay on the first one?
function startPage() {
if (rrrstarted == false) {
rrrstarted = true;
showtime = setInterval('swapFade()',5000);
}
else {
rrrstarted = true;
swapFade()
showtime = setInterval('swapFade()',5000);
}
}
On Sep 15, 1:40 am, Jeusdi <[EMAIL PROTECTED]> wrote:
> Hello All. I'm a beginner with script.aculo.us framework, and I'va
> some problem in order to create cross-fade effect:
>
> javascript code:
> <script type="text/javascript">
> var divs_to_fade = new Array('fade_product0', 'fade_product1',
> 'fade_product2', 'fade_product3');
> var current_index = 0;
> var rrrstarted = false;
>
> function swapFade() {
> Effect.Fade(divs_to_fade[current_index], { duration:1, from:1.0,
> to:0.0 });
> current_index++;
> if (current_index == 4) current_index = 0;
> Effect.Appear(divs_to_fade[current_index], { duration:1, from:0.0, to:
> 1.0 });
> }
>
> function startPage() {
> if (rrrstarted == false) {
> rrrstarted = true;
> showtime = setInterval('swapFade()',5000);
> }
> }
>
> function stopPage() {
> clearInterval(showtime);
> rrrstarted = false;
> }
>
> </script>
>
> So, each 5 seconds the transition is done. However, there is a problem
> because, the first time this effect (cross-fade) takes 5 seconds, and
> the goal would be, that when the mouse is in product_viewer div (see
> bellow) the effect begins immediately.
>
> So, now when I set the mouse over the product_viewer div, I need to
> wait 5 seconds in order to view the effect, I the first time have to
> be immediately.
>
> Thanks for all in advanced.
> I will appreciate alot your help.
>
> <div id="product_viewer" onmouseover="startPage()"
> onmouseout="stopPage()">
> <div class="fade-box" id="fade_product0">
> <img src="img/EtiProd0.gif"/>
> </div>
> <div class="fade-box" id="fade_product1" style="display: none;">
> <img src="img/EtiRibb0.gif"/>
> </div>
> <div class="fade-box" id="fade_product2" style="display: none;">
> <img src="img/EtiInd0.gif"/>
> </div>
> <div class="fade-box" id="fade_product3" style="display: none;">
> <img src="img/EtiRfid0.gif"/>
> </div>
> </div>
>
> <style>
>
> #product_viewer
> {
> border:double;
> height:45mm;
> margin:0 0 0 10px;
> width:63mm;
>
> }
>
> .fade-box {
> height:45mm;
> margin-left:0;
> position:absolute;
> width:63mm;
>
> }
>
> </style>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
