javascript - 标签内容淡入淡出效果的平滑过渡

Question

我为 following tabs here 添加了淡入淡出效果，但过渡并不顺利，尤其是在最后 2 个选项卡上。

我希望它像 this page here .

如果有人可以提供帮助，这里是 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 毫秒的时间，所以试试看它是否更符合您的喜好。

编辑:抱歉意识到问题所在。虽然当前 View 正在淡出，但它仍在页面上，因此在第一个 View 完成淡出后跳转到正确位置之前，新 View 会在其下方呈现。您需要绝对定位 View ，以便它们不会影响彼此的位置。

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，但它应该可以工作。如果您有任何问题，请在评论中告诉我