Prevent Slides Fading Out Between Transitions in jQuery Cycle Plugin

April 4th, 2013 - Posted by Steve Marks to Javascript / jQuery, Web Development.

The jQuery Cycle Plugin from Malsup is a plugin that I use on a regular basis. It’s easy to add to a site, customisable, and the documentation and examples on the website are excellent.

One thing that’s always gnarked me a little about the plugin however is how the slides always fade out before the next one fades in. This results in seeing a glimpse of the background colour for a split second. I couldn’t see an option in the available parameters to disable this, so set about looking for the responsible code in the plugin file itself.

The Solution

The plugin file itself is quite large so it took a while to find the culprit code. The change required however is tiny, one character to be precise. You simply need to do a search and amend the following line of code (for me it was line 997) from:

opts.animOut = { opacity: 0 };


opts.animOut = { opacity: 1 };

In making the change above, the slides no longer faded out, and the next slide simply faded in over the top of the previous one.

UPDATE – 27th September 2013

After using the above solution for a while, I’ve found a better, less-hacky, way to achieve the same result, without editing the main jQuery Cycle plugin file.

In summary, the plugin can transition between slides in a number of ways; Slides, fades, zooms etc. Each one of these is setup as a transition and is referenced using the ‘fx’ option when initialising the Cycle plugin. The best approach is to add our transition and use that, like so:

// Add custom transition called 'fadeInNotOut'
$.fn.cycle.transitions.fadeInNotOut = function($cont, $slides, opts) {
    opts.before.push(function(curr,next,opts) {
        opts.cssBefore.opacity = 0;
    opts.animIn	   = { opacity: 1 };
    opts.animOut   = { opacity: 1 };
    opts.cssBefore = { top: 0, left: 0 };

// Initialise Cycle using new transition name as the 'fx' option
    fx: 'fadeInNotOut'
This entry was posted on Thursday, April 4th, 2013 at 6:32 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (1)
  1. Steve says:

    This works! Thanks.