Question

I have this jQuery content switcher and it just switches between content with no effect. I’d like it to have a simple fade effect. What do I do to add it?

Here’s the fiddle and here’s the jQuery code.

$(function(){

    function contentSwitcher(settings){
        var settings = {
           contentClass : '.content',
           navigationId : '#navigation'
        };

        //Hide all of the content except the first one on the nav
        $(settings.contentClass).not(':first').hide();
        $(settings.navigationId).find('li:first').addClass('active');

        //onClick set the active state, 
        //hide the content panels and show the correct one
        $(settings.navigationId).find('a').click(function(e){
            var contentToShow = $(this).attr('href');
            contentToShow = $(contentToShow);

            //dissable normal link behaviour
            e.preventDefault();

            //set the proper active class for active state css
            $(settings.navigationId).find('li').removeClass('active');
            $(this).parent('li').addClass('active');

            //hide the old content and show the new
            $(settings.contentClass).hide();
            contentToShow.show();
        });
    }
    contentSwitcher();
});

Answer 1

Replace this:

    //hide the old content and show the new
    $(settings.contentClass).hide();
    contentToShow.show();

With this:

    //hide the old content and show the new
    $(settings.contentClass).fadeOut(800, function() {
       contentToShow.fadeIn(800);
    });

The .fadeOut() method accepts a callback as a parameter – it will call the function you supply after the fade is complete, which is the appropriate time (in my opinion) to start fading in the other content.

You can set the speed of the fade by supplying a string ("fast" or "slow") or a number of milliseconds.

Demo: http://jsfiddle.net/LjHfZ/8/