Question

我为following tabs 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毫秒，所以尝试一下，看看它是否更符合你的喜好。

编辑：抱歉实现了这个问题。当前视图逐渐淡出时，它仍然在页面上，因此在第一个视图完成淡入淡出之后跳转到正确的位置之前，新视图会在其下方呈现。您需要绝对定位视图，以免影响彼此的位置。

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

平滑过渡以淡出对标签内容的影响

2 个答案: