All images show on load with JQuery Cycle 2 plugin

Question

I am using the JQuery Cycle 2 plugin with some images and the fadeout effect. Eg:

$('#imageticker').cycle({ 
    fx:     'fadeout', 
    delay:  -2000 
});

and:

<ul id="imageticker">
  <li><img src="image1.png"/></li>
  <li><img src="image2.png"/></li>
  <li><img src="image3.png"/></li>
</ul>

This works, but when the page loads I can see all the images stacked up on each other. It is only after the first transition that hidden images disappear and it works as it should. Would anyone know how to amend this?

Answer 1

OK got it. It seems the fade is the default option and adding it to the plugin script caused this.

So, I changed

$('#imageticker').cycle({ 
    fx:     'fade', 
    delay:  -2000 
});

To just:

$('#imageticker').cycle({ 
    delay:  -2000 
});

and it fixed it.

Answer 2

Since you have transparent images, it may be better to use the fade effect instead of fadeout. After each transition:

• with fadeout, only one image has opacity: 0, the others are set to 1;
• with fade, only one image has opacity: 1, the others are set to 0.

(I also tried to play with the initial opacity, but it didn't help.)