平滑过渡，以使选项卡内容上的淡入效果

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')
  })
})