Question

我正在建立一个社交网站，我有很高的要求，所以我需要一点帮助，使动画更好，更顺畅。我必须承认我是一个后端开发人员，并没有真正做很多前端的事情，但这就是我得到的：我有一个按钮，当用户按下按钮时，我需要向用户显示一个不错的表单。我一直在研究这个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" });;

        });
    });
})

Answer 1

平滑

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

Answer 2

编辑：此外，您还可以使用缓动库。

或者是一种不透明的动画：

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/

Answer 3

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

如何让我的jquery动画更流畅？

3 个答案: