How to implement a fade effect (or any other effect) on toggle?

Question

Here's how the toggle should work: http://jsfiddle.net/uVaQ3/

$("#experience-left-details").on('click', '.see-map, .see-gallery', function (event) {
    event.preventDefault();
    $(".media-container, .swiper-container").toggleClass('hide');
    mySwiper.resizeFix(true);
    mySwiper.reInit(true);

});

GOAL

Add a fade in or any other effect on this.

TRY 1)

So I've tried to apply the effect on the container: http://jsfiddle.net/x29Xk/

$("#experience-left-details").on('click', '.see-map, .see-gallery', function (event) {
    event.preventDefault();
    $("#experience-left-details").fadeToggle();
    $(".media-container, .swiper-container").toggleClass('hide');
    mySwiper.resizeFix(true);
    mySwiper.reInit(true);
    $("#experience-left-details").fadeToggle();
});

Issue: it blinks, doesn't fade.

TRY 2)

http://jsfiddle.net/7T4w4/24/

$("#experience-left-details").on('click', '.see-map, .see-gallery', function (event) {
    event.preventDefault();
    $("#experience-left-details").fadeToggle(
        function(){
            $(".media-container, .swiper-container").toggleClass('hide');
            mySwiper.resizeFix(true);
            mySwiper.reInit(true);    
        }
    );
    $("#experience-left-details").fadeToggle();
});

Fixed the blink, but... Issue: If you click "see map" then resize the window, then click "see gallery" you will see that the gallery is NOT properly rendered.

Any help please? The intended end result is to use a slide effect, not fade, but, if one works, I suppose any other will too.

Answer 1

DEMO

The problem you are encountering is that you are asking Swiper to recalculate its size at a moment when its not visible, and therefore has no size. So we need to be calling resizeFix at a moment when the element is visible. To do this wait 16ms (or one frame) of the fadeIn animation to call resizeFix, that way its the minimum partially visible, and Swiper can determine its new size.

var $eld = $("#experience-left-details");
$eld.on('click', '.see-map, .see-gallery', function (event) {
    event.preventDefault();
    $eld.fadeOut(
        function(){
            $(".media-container, .swiper-container").toggleClass('hide');
            // wait one frame to resize
            setTimeout(function(){
                mySwiper.reInit(true);
                mySwiper.resizeFix(true);            
            }, 16);
        }
    ).fadeIn();
});