Tweaking jQuery gallery to fade out current image before fading in the next one

programming web dev
1

Hi Folks,

I am building a little gallery based on the Supersized jQuery plugin, and so far it’s not going too badly.

However I really need to sort out 1 last issue, which I have been playing with for a while now, with varying degrees of success.

The page so far can be viewed at:

http://www.pipandpeel.co.uk/tamburlaine/

The issue that needs resolving is:

[LIST=1]
[*]I need the current image to fade out to black (or 0 opacity) before the next image fades in.
[/LIST]
Links to the script and CSS are as follows:

http://www.pipandpeel.co.uk/tamburlaine/gallery/supersized.2.0.js
http://www.pipandpeel.co.uk/tamburlaine/main.css

if (options.transition == 1){
        nextslide.fadeIn(750, function(){$.inAnimation = false;});
}

The above bit of code is what brings in the next slide (image) based on the transition type I have chosen, which in this case is a simple fade. What I need to make happen though, is the current slide has to fade out before the next slide appears.

I know you can chain jQuery effects together so that 1 event happens after another, but I am not sure of the syntax I would need to use in this case.

I have tried variations such as:

if (options.transition == 1){
       currentslide.fadeOut(250, function(){$.inAnimation = false;});
       nextslide.fadeIn(750, function(){$.inAnimation = false;});
}

and

if (options.transition == 1){
       currentslide.hide();
       nextslide.fadeIn(750, function(){$.inAnimation = false;});
}

The above attempt works eventually, but it takes several image transitions before it settles down and works correctly (see this in the URL below)

http://www.pipandpeel.co.uk/tamburlaine/index2.html

So if anyone has any suggestions or knows how I can achieve the effect I want, then I would be eternally gratefull.

Something that I did find that may be of use is turning off the sync option at the following URL seems to achieve a fadeout effect, and also the galleria script uses a fadeout as well (just neither have the full image resizing and navigation functions that I am using as well).

http://malsup.com/jquery/cycle/browser.html

Anyway, I hope someone finds the time to give me some advice.

Many thanks in advance,

Drakash