文本区域在动画后消失

Textarea disappears after animation

本文关键字：消失 动画 区域 文本      更新时间：2023-09-26

我使用下面的代码来动画文本区域的消失，一旦控件失去焦点，文本区域为空。

$(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);
    }
});

我不知道为什么在动画完成之前执行display:none代码。

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

试试吧。它利用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设置为低于动画持续时间设置的值。

相关文章：