Question

I am trying to add an animation/fade to a show/hide script.

When the user clicks the “.show” anchor, I would like to slide down the “.buttons” div by the height of the “.targetDiv” div, after-which I would like the “.targetDiv” div to fade in.

Then (if possible), I would like the reverse action to occur when the “.hide” anchor is clicked – causing the “.targetDiv” to fade out, and the “.buttons” div to slide upwards (back to its original position).

Thank you for your help!

jsFiddle:

http://jsfiddle.net/XwN2L/1296/

HTML:

    <div id="content" class="targetDiv">Content</div>
    <div class="buttons">
        <a  class="show" target="content">Show</a>
        <a  class="hide" target="content" style="float: right;">Hide</a>
    </div>

JavaScript:

    $('.targetDiv').hide();
    $('.show').click(function () {
        $('.targetDiv').hide();
        $('#' + $(this).attr('target')).show();
    });

    $('.hide').click(function () {
        $('#' + $(this).attr('target')).hide();
    });

Answer 1

one option:

give your elements absolute positioning:

position: absolute;
top:0px;

then animate it like so:

$('.show').click(function () {
        $('.targetDiv').hide();
        $('.buttons').animate({
            top : '80px' // the height of your content + the padding + the margins
        },'slow',function(){
            $('#content').fadeIn('slow');
        });
});


$('.hide').click(function () {
    $('#content').fadeOut('slow',function(){
        $('.buttons').animate({
            top : '0px' // the height of your content + the padding + the margins
        });
    });
});

working example: http://jsfiddle.net/XwN2L/1298/