Question

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

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

然后（如果可能的话），我希望在单击“.hide”锚点时发生相反的操作 - 导致“.targetDiv”淡出，“.buttons”div向上滑动（返回到原来的位置）。

感谢您的帮助！

的jsfiddle：

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);} );
});

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

查看可能的 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/

动画显示/隐藏脚本

3 个答案: