1

これは私の html/css です: http://jsfiddle.net/StillD/bDMxs/

ピンクのボックスは私のポートフォリオ アイテムです。その下に、クリックしたポートフォリオ アイテムの詳細情報 (ブラウザ全体の幅) を表示したいと思います。したがって、ポートフォリオ アイテム 1 をクリックすると、ポートフォリオ全体の下にあるフッター付きの div が下にスライドして、ポートフォリオ アイテム 1 の詳細を表示するスペースができます。このポートフォリオ アイテムの詳細がここに表示されます。アイテム 2 をクリックすると、アイテム 1 の詳細が消え、アイテム 2 の詳細が表示されます。

これは、この効果を使用している Web サイトです (ポートフォリオまでスクロールしてアイテムをクリックします)。

http://www.applove.se

私はこのサイトの背後にいる人々にメールを送り、彼らは私にこれをくれました:

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

しかし、私はそれを機能させることができません。皆さんが私を助けてくれることを願っています!

4

2 に答える 2

0

ここで動作するデモhttp://jsfiddle.net/yeyene/NHskg/3/

Jクエリ

$(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);
    });
});
于 2013-06-14T09:17:38.337 に答える