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/

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

2 个答案: