Question

一旦控件失焦并且textarea为空，我使用以下代码为textarea的消失设置动画。

$(this).blur(function ()
{
    var value = $(this).val().trim();
    if (value == "")
    {
        // empty; make it disappear
        $(this).animate({
            width: 0,
            height: 0
        }, 1000,'linear',
        function ()
        {$(this).parent().css("display", "none")});
    }
});

该框在没有动画的情况下消失。但是，如果我运行以下代码，动画仍然存在：

$(this).blur(function ()
{
    var value = $(this).val().trim();
    if (value == "")
    {
        // empty; make it disappear
        $(this).animate({
            width: 0,
            height: 0
        }, 1000);
    }
});

我不确定为什么显示：在完成动画之前没有代码执行。

JSFiddle：https://jsfiddle.net/7pbuxtkz/

Answer 1

试一试。它使用promise()和done()，而不是直接从回调本身使用它。虽然您的原始代码适合我，但值得尝试。 Promise()将确保完成所有动画。

$('.notesArea').each(function () {
    $(this).blur(function () {
        var value = $(this).val().trim();
        if (value == "") {
            // empty; make it disappear
            $(this).animate({
                width: 0,
                height: 0
            }, 1000).promise().done(function () {
                $(this).parent().css("visibility", "hidden")
            });
        }
    });
});

让我知道它是怎么回事，我们将从那里开始。正如我之前提到的，如果这不起作用，那么我觉得这是从你的CSS发生的事情。如果是这样的话，我会四处寻找，看看我能为你找到什么。

有关promise()的更多信息：https://api.jquery.com/promise/

我知道你说你正在使用多个CSS文件，这就是你没有在这里发布的原因。我会浏览那些CSS文件，看看是否有任何东西将transition-duration设置为低于你设置动画持续时间的值。

动画后，Textarea消失

1 个答案: