感動的な応答のjavascript効果。どうやってするの？

最近、私は自分自身を実装したいと思っているとても素敵なレスポンシブなjavascriptを紹介します。ここに例があります：感動的な応答のjavascript効果。どうやってするの？

http://themes.iki-bir.com/alphine-wp/#！（サムネイルのいずれかを押して）。サムネイルを並べ替えるのは本当に古いトリックですが、余分なコンテンツを見ることは私にとっては新しいものです。

私がjavascriptを初めて使用しているので、多分誰でもこのチュートリアルやレッスンを知っていますか？前もって感謝します！

2012-02-03 user1016695

ルック、そして使用されている任意の追加のJavaScriptファイルをダウンロードしてください。それがどのように行われたのかを調べることができます。 – DNA

サムネイルの各行の下にdivを非表示にします。サムネイルonclickイベントハンドラのコンテンツを変更します。コンテンツが変更されたら、jQuerys slidetoggleを利用してください：http://api.jquery.com/slideToggle/

少なくとも私はどのようにそれを行うでしょう。それは想像力と良い味のちょうどミックスだ...

$(function(){ 

    $('.thumbnail').click(function(){ 

     var $this = $(this); 
     var $divToShow = $this.nextUntil('div.container'); 
     //fetch the divs content via ajax or however u want to do it here... 
     $divToShow.stop(true, true).slideToggle(); 
    }); 

});

出典

2012-02-03 13:01:20 Johan

私はその後非常に基本的なことhttp://api.jquery.com/slideDown/ ... をしようとするだろう：あなたは私を

いくつかのコード例を詳しく説明したい場合は、私に教えてください:) ドキュメントの多くは、http://docs.jquery.com/UI/Effects/Slide

出典

2012-02-03 13:02:49 frenetix

は、あなたがどのようにこのソート-trick-私に言うことができれば、他のすべてが:)非常に簡単ですので、私は、あなたがソートを行う方法を知りたいと思ったと思った... jqueryのサイトにあります作品/リンク、私は他の人の私の最善の説明を与えるでしょう:)

より多くのコンテンツの部分は、純粋なCSSで、任意のJavaScriptなしで実装することができます。この構造で。

<div class="thumb"> 
    <div class="img"></div> 
    <div class="content"></div> 
</div>

このCSSがあります。

.thumb{ 
    display:block; 
    width:100px; 
    height:100px; 
} 
.thumb div{ 
    position:absolute; 
    width:inherit; 
    height:inherit; 
} 
.thumb div.content{ 
    opacity:0; 
} 
.thumb:hover div.content{ 
    opacity:1; 
}

マウスを入力するとすぐに「onMouseOver」イベントを聴くことができます。完全な説明をロードする他の部分については、'onClick 'イベントに耳を傾け、情報を取得してxhrを投げた。

出典

2012-02-03 13:04:50 japrescott

ええ、仕分け物は非常に滑らかで印象的です – wheresrhys

jQueryのようなライブラリを使用したくない場合は、各行の下にオーバーフロー隠し、絶対位置と高さ0のdivを追加し、onclickで展開するだけです。

出典

2012-02-03 13:05:46 zozo