search

malsup / cycle

jQuery Cycle Plugin - Slideshow goodness
http://jquery.malsup.com/cycle/
1.19k stars 307 forks source link

Added Opts 'animOutDelay' and 'animInDelay' #151

Closed bucketpress closed 11 years ago

bucketpress commented 11 years ago

Using the 'fade' transition causes the background to show for a split second between transition from one slide to another. Adding a short delay (animOutDelay) before the current slide transits out allows for the next slide to transit in before the current slide transits out and solves the problem of the background showing for a split second. Added in 'animInDelay' to delay slide transition in - hoping anybody might find a good use for it. But animOutDelay was the one that solved the 'background showing for a split second' problem I faced.

malsup commented 11 years ago

Another way to solve that problem is to use the 'fadeout' effect instead of 'fade'.

bucketpress commented 11 years ago

I tried 'fadeout' as well but it had the same issue. It doesn't happen all the time but sometimes the browser seems to render the transition-out before the transition-in, and the background flashes for a split second. So this 'animOutDelay' is for overcoming such browser rendering 'inefficiency'.

malsup commented 11 years ago

Can you show me an example of the fadeout transition not working correctly? That whole point of that effect is to prevent background bleed-through.

bucketpress commented 11 years ago

Here's an example: http://chem.bucketpress.com/project/brand I've set timeout to 0. Clicking on the thumbnails, or left and right icon navigates between the slides. 'cycle' is called on '#slides' with children divs. children divs have background images.

These are the cycle args I used: fx: 'fadeout', speed: 1000, timeout: 0, prev: '#prevslide', next: '#nextslide', pager: '#thumbs'

Hope this helps. Thanks!