jquery - 单击时，显示(幻灯片)投资组合使用的详细信息

Question

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

粉红色的盒子是我的投资组合元素。在它们下面，我想显示您单击的投资组合元素的详细信息(整个浏览器宽度)。因此，当您单击投资组合元素 1 时，整个投资组合下方带有我的页脚的 div 应向下滑动以为投资组合元素 1 的详细信息腾出空间。该投资组合元素的这些详细信息应显示在此处。当您单击第 2 项时，第 1 项的详细信息应该会消失，而第 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);
    });
});