php - クリックでアニメーション化して div を表示するリンクを作成するにはどうすればよいですか?

Question

sign up linkだから私はあなたがそれをクリックすると、リンクの左側にいくつかのテキストリンクを表示し たいバーを持っています。

以下に前後のビジュアルがあります。

私はいくつかのjavascriptを試しましたが、うまくいきませんでした。アニメーション化したいのですが、わからない場合は今のところ問題ありません。何か案が？

Answer 1

おそらく、：target疑似クラスセレクターといくつかのCSS3トランジションを使用できますか？この場合、リンクをクリックすると、divの不透明度が変化し、表示されます。どのブラウザをサポートする必要があるかわかりませんか？これはIE7または8では機能しません。

移行のコードは次のとおりです。

HTML

<a href="#id1">Sign Up</a>

CSS

#id1 {

    opacity: 0;    
}


#id1:target {
    -webkit-transition: opacity 0.5s ease-in-out;
       -moz-transition: opacity 0.5s ease-in-out;
         -o-transition: opacity 0.5s ease-in-out;
                                      opacity: 1;

デモ-jsFiddle

編集：これは私がすぐに作成した2番目の例（スライド効果）であるため、スムーズに実行されていませんが、少なくとも可能なことを示しています-jsFiddle2（webkit）。

Answer 2

これはjQueryを使用して取得できます。

1. クリックするIDを指定sign up linkします。

2. リンクの下にある程度の高さがあるdivを作成し、ユーザーがリンクをクリックしたときに見えるように、すべてのスタイルを設定します。

3. そのdivにcssスタイルheight: 0pxを設定して、divが消えるようにします。

4. jQuery.animate()関数を使用して、ユーザーがリンクをクリックしたときにそのdivの高さを切り替え（または変更）します。

ここでjQuery.animate()のドキュメントを参照できます：http：//api.jquery.com/animate/。

Answer 3

あなたはjqueryで使ってみることができます

$(function() {
$('#id').click(function(e){
    e.preventDefault();
    $("#id2").animate({height : '410'}; /* what ever the styles u need */


});

})

このリンクを試してください

http://www.w3schools.com/jquery/jquery_effects.asp

http://api.jquery.com/animate/

http://viralpatel.net/blogs/understanding-jquery-animate-function/

Answer 4

$(document).ready(function()
{
 $('#id').click(function(e){
   e.preventDefault();
   $("#id2").animate({height : '410'}; /* what ever the styles u need */
 });
});

なぜ別の関数に入れたいのかわかりません。それでいい。