Question

我试图将div从右下角移动到页面的中心并且它正在工作但效果不是很舒缓而且不是很顺利。所以我添加此代码以使其在动画函数{ duration: 500, queue: false, easing: 'easeInCubic'}中流畅，但之后我的代码无效。我在这里给出完整的代码。只是看看并告诉我我的代码没有运行的错误。

还告诉我我怎么能移动＆amp;以这样的方式调整我的div，结果看起来应该非常流畅。

这是我的代码

$(document).ready(function () {
        $("#Button1").click(function () {
            $("form #UPSContainer").each(function () {
                $(this).remove();
            });

            $('form').append('<div id="UPSContainer" class="hidden" style="background:red;display:none;position:absolute"></div>');
            if ($("#UPSContainer").exists() == true) {
                $("#UPSContainer").css({ height: 0, width: 0, display: 'block' });

                var xleft = ($(window).width() - $("#UPSContainer").width());
                var xtop = ($(window).height() - $("#UPSContainer").height());

                $("#UPSContainer").css({ left: xleft, top: xtop, opacity: 0 });

                $("#UPSContainer").stop(true).animate({
                    'left': (($(window).width() - $("#UPSContainer").width()) / 2) + 'px',
                    'top': (($(window).height() - $("#UPSContainer").height()) / 2) + 'px',
                    'height': 100 + 'px',
                    'width': 100 + 'px',
                    'marginLeft': '-50px',
                    'marginTop': '-50px',
                    'opacity': '1'
                }, { duration: 500, queue: false, easing: 'easeInCubic'}, 
                function () {
                    //$("#feed_dialog").removeClass("BusyStyles").find('#acloginpod').fadeIn(2000);
                    //, opacity: 1 
                });

            }
            return false;
        });


        jQuery.fn.exists = function () { return this.length > 0; }
    });

js fiddle link http://jsfiddle.net/p4e4psg4/2/

所以我有两个担忧。一个是为什么这一行{ duration: 500, queue: false, easing: 'easeInCubic'}给出错误？

下一个非常重要的是我怎么能有平滑效果的动画？请帮忙。感谢

修改

在js fiddle http://jsfiddle.net/tridip/pbyjkuxu/查看我的脚本，添加此行{ duration: 500, queue: false, easing: 'easeInCubic'}

后脚本未运行

这里我给另一个js小提琴链接，其中div正在调整大小而不是定位。只是看看div调整大小http://jsfiddle.net/tridip/D5SUN/

的顺畅程度

我希望我的div动画具有相同的平滑度。请帮忙。感谢

Answer 1

根据你的小提琴，我更新了你的代码：

尝试使用{ duration: 800, easing: 'easeOutQuad'}（我认为是这样）'更流畅'的动画。我在div中添加了opacity，因为这是你给我们的第二个例子。

要通过step - 功能检查动画的状态，您可以使用：

step: function(now, tween){
    if(tween.prop === 'width'){
        if(now >= 50){
            console.log('Width reached 50%');
         }
    }
}

通过tween - 对象，您可以检查函数中动画的每个属性的状态。（对于尺寸，您可以检查width和height）; now引用动画属性的实际值。

Demo

无论如何，在您提供的示例中，小提琴中缺少jQuery-UI。事实上，如果动画是否流畅是非常基于意见的，很难回答。

只需使用jQUery-UI核心提供的easings和一些持续时间玩一下，直到您对结果感到满意为止。

我建议使用最新版本的jQuery和UI。当然这取决于您现有的代码并使用了插件。

如何移动＆amp;重新调整DIV大小，效果平滑

修改

1 个答案: