单击即可显示(幻灯片)详细信息，以供项目组合使用

Question

这是我的html/css：http://jsfiddle.net/StillD/bDMxs/

粉红色的盒子是我的公文包。在它们下面，我想要显示您点击的项目组合的详细信息(整个浏览器宽度)。因此，当您单击portfolio item 1时，整个portfolio下带有我的页脚的div应向下滑动，以便为portfolio item 1的详细信息腾出空间。此portfolio item的详细信息应显示在此处。单击item 2时，item 1的详细信息应该消失，而item 2的详细信息应该出现。

这是一个使用此效果的网站(向下滚动到文件夹并单击一个项目)：

http://www.applove.se

我给这个网站背后的人发了邮件，他们给了我这个：

onclick="$('#name').slideDown();
$('#name2').slideUp(); 
$('html, body').animate({scrollTop: $('#name.offset().top }, 600);"

但是我不能让它工作。我希望你们能帮帮我！

Answer 1

工作演示在这里http://jsfiddle.net/yeyene/NHskg/3/

JQUERY

$(document).ready(function(){
    $(".portfolio").click(function () {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('html, body').animate({scrollTop: $('#targetWrapper').offset().top }, 600);
    });
    $(".close").click(function () {
        $('.description').slideUp();        
        $('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
    });
}); 

Answer 2

示例站点所做的基本上是使用锚点(但带有jquery特性)。我建议从标签开始(在jquery UI中)，然后添加你想要的任何滑动效果。参考：http://jqueryui.com/tabs/#default