动画显示/隐藏脚本

Question

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

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

然后（如果可能的话），我希望在单击“.hide”锚点时发生相反的动作 - 导致“.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?

Answer 2

当目标元素嵌套在另一个元素中时，更容易实现。这样您就可以将幻灯片动画分别应用到包含的父元素和淡入淡出动画到目标子元素。

例如：

HTML

<div id="content_container">
    <div id="content" class="targetDiv">Content</div>
</div>

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

Javascript

$('.show').click(function () {
    var target        = $('#' + $(this).attr('target'));
    var target_parent = target.parent().height(target.outerHeight());
    target_parent.slideDown(250, function() { target.fadeIn(500); });
});

$('.hide').click(function () {
    var target        = $('#' + $(this).attr('target'));
    var target_parent = target.parent();
    target.fadeOut(500, function() {target_parent.slideUp(500);} );
});

注意在“显示”处理程序中，父元素如何从当前隐藏的子元素继承其高度。

查看可能的jsFiddle demo

Answer 3

一个选项：

给你的元素绝对定位：

position: absolute;
top:0px;

然后像这样对其进行动画处理：

$('.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
        });
    });
});

工作示例：http://jsfiddle.net/XwN2L/1298/