Javascript 平滑过渡，在选项卡内容上产生淡入淡出效果

我已经为添加了淡入效果，但过渡并不平滑，尤其是在最后两个选项卡上

我希望是这样

如果有人能帮忙，下面是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();
        }
    }   

});

---

非常感谢。

在我的浏览器中看起来很流畅。这两个页面都使用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>

我们给标签一个绝对位置。顶部和左侧坐标是相对于容器的，所以它们是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，但它应该可以工作。如果您有任何问题，请在评论中告诉我。

在我的浏览器中似乎很流畅。这两个页面都使用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>

我们给标签一个绝对位置。顶部和左侧坐标是相对于容器的，所以它们是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，但它应该可以工作。如果您有任何问题，请在评论中告诉我。问题是，另一个页面正在使用回调进行动画。动画完成后，将执行回调。您可以使用它平滑地

.fadeOut（）

和

.fadeIn（）

元素

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

---

问题是，另一个页面正在使用回调来生成动画。动画完成后，将执行回调。您可以使用它平滑地

.fadeOut（）

和

.fadeIn（）

元素

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

---

尝试设置

fadeout

和

fadein

定时值并选择合适的..尝试设置

fadeout

和

fadein

定时值并选择合适的..感谢您的回复，您是第一个发现问题的人，没错，但我不确定如何将绝对值添加到视图中？如果你能提供一个很好的例子，你知道为什么右>左与左>右相比效果更平滑吗？我不认为绝对定位在这种情况下会有帮助，因为它是不需要的。因为从右到左时，淡入标签已经在正确的位置，而淡出标签会被移动（可能是在屏幕外，在这种情况下，它看起来好像立即消失了，您只需获得新选项卡的平滑动画）。谢谢你的回复，你是第一个发现有问题的人，没错，就是这样，但我不知道如何将绝对值添加到视图中？如果你能提供一个很好的例子。你知道为什么从右>左到左>右效果更平滑吗？我认为绝对位置在这种情况下没有帮助因为从右到左，“淡入”选项卡已经处于正确的位置，并且是“淡出”选项卡被移动（可能在屏幕外，在这种情况下，它看起来会立即消失，您只需获得新选项卡的平滑动画）。好的观点。使用回调会使动画按顺序而不是同时发生。你的建议会解决问题。我想这是个人偏好，让一个动画淡入下一个动画还是让动画依次出现。鉴于OP要求的效果与另一个站点一样，我建议你可能值得为了得到被接受的答案。哈哈，是的。这是最简单的答案可能是最好的情况之一。我认为OP在处理更复杂的解决方案时有点不知所措。另外，我认为OP想要的是两个方面都正确。非常感谢你的建议，我会尝试一下。很好。使用回调使动画按顺序而不是同时进行。你的建议将解决问题。我想这是个人偏好，让一个动画淡入下一个动画还是让动画依次进行。鉴于OP要求的效果与另一个站点类似，我建议你可能应该得到公认的答案。H啊哈，是的。这是其中一种情况，最简单的答案可能是最好的。我认为OP在处理一个更复杂的解决方案时有点不知所措。另外，我认为OP想要的是两个方面都正确。非常感谢你的建议，我会尝试一下。