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

更平滑

使用wirey发布的代码和：http ('slow'): //jsfiddle.net/MfdBw/

于 2013-03-22T16:20:22.117 回答
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 回答
0

只需使用jQuery Ui并添加一些显示选项，例如container.show('clip');

于 2013-03-22T16:21:34.717 回答