如何添加淡入淡出到这个标签式jQuery内容？

如何在选项卡式内容之间添加淡入淡出效果？我尝试使用fadeIn和fadeOut而不是显示和隐藏，但这会产生不需要的结果。如何添加淡入淡出到这个标签式jQuery内容？

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(); 
    } 
    }); 
});

来源

2015-07-21 Tannie

为什么另起炉灶？ jQuery UI已经有了一个.tabs()方法和选项，允许选项卡之间的动画。

来源

2015-07-21 17:30:53

同意 - 我用分叉的CodeP开始了en和有限的JS知识。 – Tannie

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

像

tab.fadeToggle('slow');

来源

2015-07-21 17:36:13

第24行的你的Javascript可以通过改变.animate()到：

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

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

来源

2015-07-21 17:38:14 StaticVoid

谢谢！这很好。我现在更了解如何将这些东西连接在一起。 – Tannie

很高兴能帮到你！请标记为其他人的答案。 – StaticVoid

我没有足够的代表标记为答案，即使在我自己的问题:( – Tannie

如何添加淡入淡出到这个标签式jQuery内容？

回答

相关问题