Javascript 设置显示/隐藏脚本的动画

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

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

然后，如果可能的话，我希望在单击.hide锚定时发生相反的操作-导致.targetDiv淡出，.buttons div向上滑动回到其原始位置

谢谢你的帮助

jsFiddle：

HTML:

一种选择：

为您的元素提供绝对定位：

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

---

工作示例：

我只需使用jquery的slideUp/slideDown方法

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

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

如果您非常想滑动和褪色，请检查以下内容：

---

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

例如：

HTML

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

---

看可能的

谢谢，这正是我想要的。但是，我的网站使用多个“.targetDiv”div，而不仅仅是“内容”-是否有方法选择显示/隐藏锚定中的目标div？我试图修改您的示例，请参考第8行和第14行。不知道怎么了？再次感谢你！谢谢你的回复，尼克，我已经试着在上面提到的网站上实现你的新建议。显示/隐藏的元素被包装在一个div中，包装具有绝对位置和0px的“top”值。我遇到的问题是，带有“.targetDiv”类的元素在动画期间没有出现。但是，当我从一个div中删除该类时，它们会出现！我和我的一个朋友花了几个小时看了看，我们没有运气！希望我能再次借用你的专业知识——以下是我的工作内容：这就是你的意思：对不起，我本想早点勾选你的回答，只是我还是个新手。非常感谢您的帮助和耐心！：

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

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

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

<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>

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