Question

以下是切换应该如何工作： 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);

});

目标

为此添加淡入或任何其他效果。

尝试1）

所以我试图在容器上应用效果： 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();
});

问题：它会闪烁，不会褪色。

尝试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();
});

修正了眨眼，但...... 问题：如果您点击“查看地图”，然后调整窗口大小，然后点击“查看图库”，您会看到图库不正确呈现。

请帮忙吗？预期的最终结果是使用幻灯片效果，而不是淡入淡出，但是，如果一个有效，我想其他任何一个也是如此。

Answer 1

DEMO

您遇到的问题是，您要求Swiper在不可见时重新计算其大小，因此没有大小。所以我们需要在元素可见时调用resizeFix。要执行此操作，请等待fadeIn动画的16ms（或一帧）调用resizeFix，这样它的最小部分可见，Swiper可以确定其新大小。

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();
});

如何在切换时实现淡入淡出效果（或任何其他效果）？

1 个答案:

DEMO