Question

I am using the jQuery library so that is available. I need to know how to add a sliding effect to this page:

http://qasim.x10.mx/iqbal/

Notice when you click it, it fades in and out, but I would much rather love it to slide, I have a small idea on how they work but, in the way it is currently coded, but not sure the proper technique in implementing one. what could be the easiest way?

Many thanks.

Answer 1

As I understand your site, you have this code that does the fading transition:

$('nav ul li').not('#line').click(function(){
    selected = $(this).attr('id');
    $('nav ul li').css({'background': '', 'color': '#999'});
    $(this).css({'background': getColor(selected), 'color': '#FFF'});

    $('.content').fadeOut('fast', function(){
        $(this).html($('div#'+selected).html());
        $(this).fadeIn('fast');
    })

})

If you wanted it to slide, it’d probably be easier to use jQuery UI. If you want something like to slide and fade off to the left, then you could use the drop transition in jQuery UI to accomplish this:

$('nav ul li').not('#line').click(function(){
    selected = $(this).attr('id');
    $('nav ul li').css({'background': '', 'color': '#999'});
    $(this).css({'background': getColor(selected), 'color': '#FFF'});

    $('.content').hide('drop', {direction: 'left'}, 'fast', function(){
        $(this).html($('div#'+selected).html());
        $(this).show('drop', {direction: 'right'}, 'fast');
    })

})

I obviously didn’t try running this exact code on your site, but it will definitely look something like that.

You can find out more about the drop effect here:

• http://docs.jquery.com/UI/Effects/Drop
• http://jqueryui.com/demos/hide/ (click Drop on the dropdown menu)

Hopefully this helps. 🙂