1

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

当用户单击“.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();
    });
4

3 回答 3

1

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

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

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

如果您迫切希望滑动和褪色，请查看以下内容：

同时淡出（）和滑动（）？

于 2013-01-19T22:48:04.137 回答
0

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

例如：

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

于 2013-01-19T22:54:21.360 回答
-1

一种选择：

给你的元素绝对定位：

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/

于 2013-01-19T22:46:54.730 回答