jquery - 为 HTML 结构添加淡入淡出效果

Question

我有 HTML 选项卡菜单。具有以下内容：

HTML：

<ul class="quicktabs-tabs quicktabs-style-nostyle">
    <li class="even first active"><a class="active jquery-once-2-processed" id="quicktabs-tab-creative_tab-0" href="/?q=node&amp;qt-creative_tab=0#qt-creative_tab">NELER YAPARIZ?</a></li> 
    <li class="odd last"><a class="active quicktabs-loaded jquery-once-2-processed" id="quicktabs-tab-creative_tab-1" href="/?q=node&amp;qt-creative_tab=1#qt-creative_tab">GÜNCEL ETKİNLİKLER</a></li>
</ul>

当点击li a菜单时，获得淡入淡出效果。我该如何添加这个？

Answer 1

$('.quicktabs-tabs').on('click', 'a', function(e){
    e.preventDefault();
    $(e.delegateTarget).stop(true, true).fadeTo(300, 0.1); //args: duration, opacity lvl
});

Answer 2

这使得 50% 的不透明度淡入淡出 http://api.jquery.com/fadeTo/

$(".quicktabs-tabs li a").on('click',function(){
    e.preventDefault();
    $(this).fadeTo(500,0.5);
});

如果你想淡出你应该这样做 http://api.jquery.com/fadeOut/

$(".quicktabs-tabs li a").on('click',function(){
    e.preventDefault();
    $(this).fadeOut(500);
});

这是一个 jsfiddle 示例http://jsfiddle.net/9BSbh/