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

まばたきは修正されましたが... 問題: [マップを表示] をクリックしてウィンドウのサイズを変更し、[ギャラリーを表示] をクリックすると、ギャラリーが正しくレンダリングされないことがわかります。

何か助けてください。意図した最終結果は、フェードではなくスライド効果を使用することですが、1 つが機能する場合は、他の効果も同様に機能すると思います。

4

1 に答える 1

2

デモ

発生している問題はSwiper、サイズが表示されていないときにサイズを再計算するように求めているため、サイズがないことです。resizeFixしたがって、要素が表示されている瞬間に呼び出す必要があります。これを行う16msには、fadeIn アニメーションの待機 (または 1 フレーム) を呼び出します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 に答える