Question

我在点击链接时尝试替换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);
    });


});

这仅在第一次点击链接时有效，但我希望每次点击链接时都可以使用它。有人可以告诉我怎么做吗？

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

Answer 2

（文档）$。就绪（函数（）{

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

}）;

用动画替换div

2 个答案: