CODEWITHSUNDEEP
javascriptjqueryhtmlcss
KstreakOG
KstreakOG

Reputation: 57

Fade In Content and Fade Out Current Div?

so I am trying to Fade In a div while fading out current div I have some code here which might show what I was trying to get at!

Code :

 [1]: https://jsfiddle.net/trftw00c/

Upvotes: 0

Views: 25

Answers (1)

Eric Guan
Eric Guan

Reputation: 15992

Don't create an event handler for each menu, you can generalize the functionality. Keep track of the default page, and the current page.

In my jsFiddle i'm following your convention where the menu item id is equal to the item content class.

e.g. #soap corresponds to the content .soap

https://jsfiddle.net/guanzo/trftw00c/2/

var current = "home";

$('.nav-tabs').on('click','li',function(){
    var clicked = $(this).attr('id');
    $('#'+current).toggleClass('active');
    $('#'+clicked).toggleClass('active');
    $('.'+current).fadeOut('fast',function(){
        $('.'+clicked).fadeIn('fast');
    })
    current = clicked;
})

Upvotes: 1

Related Questions