0

私はソーシャル ネットワーク サイトを構築していますが、これには高い要求があるため、アニメーションをより良くスムーズにするために少し助けが必要です。私はバックエンドの開発者であり、実際にはフロントエンドのことをあまり行っていないことを認めなければなりませんが、これは私が得たものです: ボタンがあり、ユーザーがボタンを押したときに、ユーザーに素敵なフォームを表示する必要があります。私はこのhttp://jsfiddle.net/bTZ5D/1/のアニメーションに取り組んでいます。大丈夫だと思いますが、本当にWOWの素材ではありません。誰かがそれをより良くするか、より良くする方法を提案できるなら、私は感謝します。これは私のjsコードです:

jQuery(function($){
    $('body').on('click', '#ask-question', function() {
        var container = $('.ask-question-wrapper');

        $(this).fadeOut('fast', function() {
            $(this).hide();
            container.show();
            container.animate({ height: "265px" }).animate({  
               height: "245px" });;

        });
    });
})
4

3 に答える 3

1

編集: さらに、イージング ライブラリを使用することもできます。

または一種の不透明アニメーション:

jQuery(function($){
    $('body').on('click', '#ask-question', function() {
        var container = $('.ask-question-wrapper');

        container.css('opacity', '0');

        $(this).fadeOut('fast', function() {
            $(this).hide();
            container.show();
            container.animate({ height: "265px",
                                opacity: 1}).animate({  
            height: "245px" });

        });
    });
})

http://jsfiddle.net/zp6fA/

于 2013-03-22T16:25:52.220 に答える
1

スムーズ

wireyおよびhttp://jsfiddle.net/MfdBw/('slow')によって投稿されたコードを使用する

于 2013-03-22T16:20:22.117 に答える
0

jQuery Uiを使用して、表示するオプションをいくつか追加するだけです。container.show('clip');

于 2013-03-22T16:21:34.717 に答える