Textarea исчезает после анимации

Question

Я использую следующий код, чтобы анимировать исчезновение текстового поля после того, как элемент управления находится вне фокуса, а текстовое поле пуст.

$(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 на что-то ниже, чем вы настраиваете продолжительность своей анимации.