【至急!!】Jqueryを使った下記のようなフッターの動きについて質問です。

①フッターは常に固定で表示されている。（FIX）

②常に表示されているフッターの上に、更新順に切り替わる文章（１行）を表示させる。

③フッター中央に付けたボタンをクリックすると、フッターが画面の３分の１ほどに伸びる。（②は消える）

④伸びたフッター部分にニュースなどの情報を記載できるようにする。

サンプルサイト
http://epoch-inc.jp

この動きをさせたいのですが、どうしてもjqueryのサンプルが見つかりません。
恐れ入りますが、どなたかご教授をお願いいたします。

No.2 回答者： fufufunofufufu 回答日時： 2015/10/05 18:00

CSS３と簡単なjqueryでできますよ。

【HTML】
<div id="wrapper">
<div class="main">
コンテンツ内容
</div>
<footer>
<div class="trigger"></div>
<div class="f_inner">
<div class="f_01"><a href="#">フッター上部1行</a></div>
<div class="f_02">
<a href="#">フッター中身</a><br>
<a href="#">フッター中身</a><br>
<a href="#">フッター中身</a><br>
<a href="#">フッター中身</a><br>
<a href="#">フッター中身</a><br>
</div>
</div>
</footer>
</div>

【CSS】
/*フッター固定*/
html,body{ height: 100%;}
#wrapper{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
.main{padding-bottom: 150px; /*フッター高さなので適宜*/}
footer{
max-height: 150px;/*フッター高さなので適宜*/
position: absolute;
bottom:0;
width: 100%;
}
/*フッター中身　数値は適宜*/
.trigger{
cursor: pointer;
width: 30px;
height: 30px;
margin: 0 auto;
}
.f_inner{
overflow: hidden;
height: 30px;/*上の１行分だけ見せる高さ*/
transition: all 0.5s ease;}
.f_inner.active {height: 150px;/*全部表示*/}
.active .f_01{display: none;}
.f_02{padding-top: 50px;}

【jQuery】
説明：クラスtriggerクリックで.f_innerの表示切り替えのためのクラスactiveを追加したり削除したり
<script>
$(function(){
$(".trigger").click(function(){
$(".f_inner").toggleClass("active");
});
});
</script>

見た目とかは整えて貰えれば。
動きはこれで動くと思います。
アニメーション時の動きがただのeaseが嫌な場合も好きな動きに変えてください。

頑張ってください

No.1 回答者： fujillin 回答日時： 2015/09/30 12:28

こんにちは

＞どうしてもjqueryのサンプルが見つかりません。
「サンプル」の意味するものが何なのかよくわかりませんが、ご提示のサイトもjQueryを利用しているようですので、そのままでサンプルといえばサンプルだと思いますけれど・・・？

もし、コピペで同じ機能を使えるような一般化したものを探そうとなさっているのなら、多分ないと思いますよ。
なぜなら、かなり複合化した機能になっているので、その意味では特殊なものになっていると言えるからです。

解説や単純化したサンプルを探したいのであれば、個別の機能ごとに分解して探せば、作り方やあるいはコピペで利用できるものを載せているサイトもあるものと想像します。
例えば、
　・マーカーのクリックで、（フッターの）サイズを伸縮する
　・newsとmenberersで表示内容をタブ的に切り替え表示する
　・表示内容をスライドショーのようにスライド表示する
　・ニュースなどをajaxで表示する
などなど。

ちなみに、ご提示のサイトではフッターに関する基本的なスクリプトは「footer.js」に収められているようですので、その部分だけでも参考になるのではないかと思います。