Question

Currently we have the following jQuery to hide one option and show another. How can we give it a smoother transition where it slides/fades the old one up and slides/fades the new one in?

function pdi_click() {
if ($('#weekendpass').is(":checked") == true) {
    $('.pdioption2').hide('fast');
    $('input[name=pdinotattending]').attr('checked', false);

    $('.pdioption1').show('fast');

} else {
    $('.pdioption1').hide('fast');
    $('input[name=pdiattending]').attr('checked', false);
    $('.pdioption2').show('fast');

}

Please see jsfiddle to recommend jQuery suggestions.

http://jsfiddle.net/JoshSalway/8YSRm/

Answer 1

Try using slideToggle with a callback specified for the complete function.

function pdi_click() {
    if ($('#weekendpass').is(":checked") == true) {
        $('.pdioption2').slideToggle('slow', function(){
            $('.pdioption1').slideToggle('slow');
        });
        $('input[name=pdinotattending]').attr('checked', false);
    } else {
        $('.pdioption1').slideToggle('slow', function(){
            $('.pdioption2').slideToggle('slow');
        });
        $('input[name=pdiattending]').attr('checked', false);
    }
    //add_cost(25);
    //update_cost();
}

Example: http://jsfiddle.net/8YSRm/2/