用动画替换 div答案

【问题标题】：replace div with animation用动画替换 div
【发布时间】：2014-08-06 13:27:50
【问题描述】：

我正在尝试在单击链接时替换 div。当显示第一个 div 并单击第二个 div 的链接时，我希望第一个 div 向下滑动并消失，第二个 div 从底部滑入。

到目前为止，我有这个：

HTML

       <li><a href="#" class="ripplelink" id="link_1">Home</a></li>
       <li><a href="#" class="ripplelink" id="link_2">Another link</a></li>



                <div class="jumbotron" id="home">
                    <h1>Hey there!</h1>
                    <p>...</p>
                </div>

                <div class="jumbotron" id="portfolio">
                    <h1>Hello again!</h1>
                    <p>...</p>
                </div>

JQUERY

$(document).ready(function(){

    $('#portfolio').hide();
    $('#home').animate({'margin-top': '-0.8em'}, 500);

    $('#link_2').click(function(){
        $('#home').hide();
        $('#portfolio').show();
        $('#portfolio').animate({'margin-top': '-0.8em'}, 500);
    });

    $('#link_1').click(function(){
        $('#portfolio').hide();
        $('#home').show();
        $('#home').animate({'margin-top': '-0.8em'}, 500);
    });


});

这仅在第一次单击链接时有效，但我希望它在每次单击链接时都有效。谁能告诉我该怎么做？

【问题讨论】：

看看jquery的slideToggle()函数。 api.jquery.com/slidetoggle

标签： jquery html animation jquery-animate

【解决方案1】：

没有查看完整的标记，我猜你需要将 div 恢复到原始位置。

$('#link_2').click(function(){
    // --- THIS line is missing---
    $('#home').css({'margin-top': '0em'});
    // -------------------------------------
    $('#home').hide();
    $('#portfolio').show();
    $('#portfolio').animate({'margin-top': '-0.8em'}, 500);
});

$('#link_1').click(function(){
    // --- THIS line is missing---
    $('#portfolio').css({'margin-top': '0em'});
    // -------------------------------------
    $('#portfolio').hide();
    $('#home').show();
    $('#home').animate({'margin-top': '-0.8em'}, 500);
});

【讨论】：

【解决方案2】：

$(document).ready(function(){

$('#portfolio').hide();


$('#link_2').click(function(){
    $('#home').slideUp("slow", function() { 
    });

    $('#portfolio').slideDown("slow", function() { 
    });

});

$('#link_1').click(function(){
     $('#portfolio').slideUp("slow", function() { 
    });

    $('#home').slideDown("slow", function() { 
    });
});

});

【讨论】：