1

以下是切换的工作方式：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();
});

修复了闪烁，但是... 问题：如果您单击“查看地图”然后调整窗口大小，然后单击“查看图库”，您将看到图库未正确呈现。

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

4

1 回答 1

2

演示

您遇到的问题是您要求Swiper在其不可见时重新计算其大小，因此没有大小。所以我们需要resizeFix在元素可见的时候调用。为此，请等待16ms（或一帧）fadeIn 动画调用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();
});
于 2014-05-01T17:50:43.383 回答