CODEWITHSUNDEEP
jqueryfade
Slaythern Aareonna
Slaythern Aareonna

Reputation: 353

Add fade effect to HTML structure

I have HTML tab menu. With the following:

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>

And when click li a menu, get fade effect. How can i add this?

Upvotes: 0

Views: 321

Answers (2)

Marcelo Biffara
Marcelo Biffara

Reputation: 831

this makes a fade to 50 % opacity http://api.jquery.com/fadeTo/

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

if you want to fadeout you should do this http://api.jquery.com/fadeOut/

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

here's a jsfiddle with you example http://jsfiddle.net/9BSbh/

Upvotes: 1

Michael Malinovskij
Michael Malinovskij

Reputation: 1422

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

Upvotes: 1

Related Questions