1

我在此处为以下选项卡添加了淡入淡出效果，但过渡并不顺畅，尤其是在最后 2 个选项卡上。

我希望它像这里的这个页面。

如果有人可以提供帮助，这是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();
        }
    }   

});

非常感谢。

4

2 回答 2

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

于 2013-05-16T14:27:50.470 回答
0

问题是另一个页面正在为他们的动画使用回调。动画完成后，它会执行回调。您可以使用它来平滑.fadeOut()和.fadeIn()元素。

$('.tab').click(function() {
  $('.content-to-fade-out').fadeOut('fast', function() {
    $('.content-to-fade-in').fadeIn('fast')
  })
})
于 2013-05-16T20:08:30.533 回答