Question

如何在标签内容之间添加淡入淡出？我尝试使用fadeIn和fadeOut而不是show和hide，但这会产生不需要的结果。

var tabControls = jQuery('#product-data-tabs-control li'),
    tabTriggers = tabControls.find('a'),
    tabs        = jQuery('#product-data-tabs .product-data-tab'),
    activeClass = 'active-tab';

jQuery('#product-data-tabs-control li:first, #product-data-tabs .product-data-tab:first').addClass(activeClass);

tabs.each(function(){
  if(!jQuery(this).hasClass(activeClass)){
    jQuery(this).hide();
  }
});

tabTriggers.each(function(){
  var tab       = jQuery(jQuery(this).attr('href')),
      parent    = jQuery(this).parent();
  jQuery(this).click(function(e){
    e.preventDefault();
    if(!parent.hasClass(activeClass)){
      tabControls.removeClass(activeClass);
      tabs.hide();
      parent.addClass(activeClass);
      tab.show();
    }
  });
});

Answer 1

为什么重新发明轮子？ jQuery UI已经有一个.tabs()方法和选项，允许选项卡之间的动画。

Answer 2

您可以使用".fadeIn('slow')"，".fadeOut('slow')"代替.show()和.hide() 还是有点混乱？您也可以使用.fadeToggle()代替.show()和.hide()

<强>像

tab.fadeToggle('slow');

Answer 3

您的Javascript第24行可以使用.animate()更改为：

tab.show().css("opacity", 0).animate({opacity: 1}, 1000);

更新了CodePen：http://codepen.io/anon/pen/pJOwbB

如何为此选项卡式jQuery内容添加淡入淡出？

3 个答案: