如何在切换时实现淡入淡出效果（或任何其他效果）？ [英] How to implement a fade effect (or any other effect) on toggle?

问题描述

以下是切换应该如何工作：
http://jsfiddle.net/uVaQ3/

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

});

目标

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

尝试1）

所以我试图在容器上应用效果：
http://jsfiddle.net/ x29Xk /

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.

尝试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.

推荐答案

< h2> DEMO

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

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

这篇关于如何在切换时实现淡入淡出效果（或任何其他效果）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！