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

**URL:** <https://forum.kirupa.com/t/tweaking-jquery-gallery-to-fade-out-current-image-before-fading-in-the-next-one/309004>\
**Category:** web dev\
**Created:** [May 4, 2010, 9:32pm UTC](https://forum.kirupa.com/t/tweaking-jquery-gallery-to-fade-out-current-image-before-fading-in-the-next-one/309004 "2010-05-04T21:32:01Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Drakash](https://avatars.discourse-cdn.com/v4/letter/d/b19c9b/32.png) [@Drakash](https://forum.kirupa.com/u/Drakash)\
**Post date:** [May 4, 2010, 9:32pm UTC](https://forum.kirupa.com/t/tweaking-jquery-gallery-to-fade-out-current-image-before-fading-in-the-next-one/309004/1 "2010-05-04T21:32:01Z")

</div>

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/](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/gallery/supersized.2.0.js)  
[http://www.pipandpeel.co.uk/tamburlaine/main.css](http://www.pipandpeel.co.uk/tamburlaine/main.css)

```auto
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:

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

```

and

```auto
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](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](http://malsup.com/jquery/cycle/browser.html)

> **[kirupaForum](http://forum.kirupa.com/)**
>
> Got a web design/development question or just want to hang out with the most awesome people on the planet? Drop on in!

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

Many thanks in advance,

Drakash