javascript - 动画显示/隐藏脚本

Question

我正在尝试向显示/隐藏脚本添加动画/淡入淡出。

当用户单击“.show” anchor 时，我想将“.buttons”div向下滑动“.targetDiv”div的高度，之后我希望“.targetDiv”div淡入。

然后(如果可能)，我希望在单击“.hide” anchor 时发生相反的操作 - 导致“.targetDiv”淡出，并且“.buttons”div向上滑动(回到其原始位置)。

感谢您的帮助!

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

我会简单地使用jquery的slideUp/slideDown方法。

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

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

如果您渴望滑动和淡出，请查看以下内容:

fadeOut() and slideUp() at the same time?