平滑過渡，以使選項卡內容上的淡入效果

Question

我在此處的以下標簽中添加了淡入淡出效果，但過渡效果並不流暢，尤其是在最后兩個標簽中。

我希望這里像這個頁面 。

如果有人可以提供幫助，這是Javascipt：

$(window).load(function(){

    $('.tab:not(.aboutus)').fadeOut();

    $('.tabs li').click(function(){
        var thisAd = $(this).parent().parent();
        $(thisAd).children('.tab').fadeOut();
        $(thisAd).children('.'+$(this).attr('class').replace('tab','')).fadeIn();
        $('.tabs li').removeClass('active');                                                    
        $(this).addClass('active');
    });

                newContent.hide();
                currentContent.fadeOut(10, function() {
                    newContent.fadeIn(100);
                    currentContent.removeClass('current-content');
                    newContent.addClass('current-content');
                });

    if(window.location.hash) {
        if (window.location.hash == "#map") {
            $(".Advert").children('.tab').fadeOut();
            $(".Advert").children('.map').fadeIn();
            $('.tabs li').removeClass('active');                                                    
            $('.maptab').addClass('active');
        }
        if (window.location.hash == "#voucher") {
            $(".Advert").children('.tab').fadeOut();
            $(".Advert").children('.vouchers').fadeIn();
        }
    }   

});

非常感謝。

Answer 1

在我的瀏覽器中似乎很流暢。 兩個頁面都使用JQuery並具有基本相同的代碼。 唯一的區別是，第二個信號淡出和淡入都使用200毫秒的時間，因此請嘗試一下，看看是否更喜歡您。

編輯：對不起，意識到了問題。 當前視圖淡出時，它仍在頁面上，因此在第一個視圖淡化之后，新視圖將在其下方呈現，然后跳入正確的位置。 您需要絕對放置視圖，以便它們不會影響彼此的位置。

EDIT2：最簡單的實現是將div包裹在選項卡上，然后使用：

<div class="tabContainer">
  <div class="tab aboutus" style="display:none">...</div>
  <div class="tab map" style="display:none">...</div>
  <div class="tab features" style="display:none">...</div>
  <div class="tab vouchers" style="display:none">...</div>
</div>

在css中，我們為容器指定相對位置，以充當選項卡的邊界框：

.tabContainer {
  position: relative;
}

我們給標簽頁一個絕對的位置。 頂部和左側坐標相對於容器，因此這就是0。

.tab {
  margin: 0 0 8px 0;
  position: absolute;
  top: 0;
  left: 0;
}

和js：

$(function() { // as you're using jquery anyway you might as well use the JQuery ready function which probably suits your purposes better anyway.
      $('.tabs li').click(function(){      
          $('.tab').filter(':visible').fadeOut(200); // I'm using simpler selectors than you which will give a (very) slight performance boost (but check to make sure this won't cause any conflicts elsewhere)
          $('.tab').filter('.'+$(this).attr('class').replace('tab', '')).fadeIn(200);
          $('.tabs li').removeClass('active');                                                    
          $(this).addClass('active');
      }

      // I've deleted some code here as it doesn't do anything other than throw exceptions.

      if(window.location.hash) { // Due to the changes to the html this needs changing too.
            if (window.location.hash == "#map") {
                $('.tab').hide();
                $('.map').show();
                $('.tabs li').removeClass('active');                                                    
                $('.maptab').addClass('active');
            }
            if (window.location.hash == "#voucher") {
                $('.tab').hide();
                $('.vouchers').show();
                $('.tabs li').removeClass('active');                                                    
                $('.vouchertab').addClass('active');
            }
            else {
                $('.aboutus').show(); // even better would be to make this visible by default in css but I'll leave it as js as that's what you had in your question
            }
        }   
    });

注意：我無法測試javascript，但應該可以。 如果您有任何麻煩，請在評論中讓我知道

Answer 2

問題是另一個頁面正在使用其動畫的回調。 動畫完成后，它將執行回調。 您可以使用它來平滑.fadeOut()和.fadeIn()元素。

$('.tab').click(function() {
  $('.content-to-fade-out').fadeOut('fast', function() {
    $('.content-to-fade-in').fadeIn('fast')
  })
})