jQuery Animation Delay Agregar una clase

Question

Estoy intentando retrasar la adición de una clase usando jquery. Todo el código funciona bien, pero me gustaría retrasar el .addClass('hideText') hasta que se complete la función hover out ¿podría alguien mostrarme cómo hacer esto, por favor?

Aquí está el código:

$(document).ready(function() { 

$('.listing div').addClass('hideText'); 

$('.listing div').hover(

function() { 
    $(this) 
    .stop(true) 
    .removeClass('hideText') 
    .animate(
     {top: '0'}, 
     {duration: 300, easing: 'linear', queue: false} 
    ) 
    }, 
    function() { 
     $(this) 
     .stop(true) 
     .animate(
      {top: '150px'}, 
      {duration: 300, easing: 'linear', queue: false} 
     ) 
     .addClass('hideText') 
    }); 

});

Answer 1

Coloque la línea .addClass() en una devolución de llamada:

$(document).ready(function() { 

$('.listing div').addClass('hideText'); 

$('.listing div').hover(

function() { 
    $(this) 
    .stop(true) 
    .removeClass('hideText') 
    .animate(
     {top: '0'}, 
     {duration: 300, easing: 'linear', queue: false} 
    ) 
    }, 
    function() { 
     $(this) 
     .stop(true) 
     .animate(
      {top: '150px'}, 
      {duration: 300, easing: 'linear', queue: false}, 
      function() { 
       $(this).addClass('hideText'); 
      } 
     ); 
    }); 
}); 

Answer 2

¿Ha intentado hacer cola la función como esta?

function() { 
     $(this).stop(true).queue(function (next) { 
      .animate(
       {top: '150px'}, 
       {duration: 300, easing: 'linear', queue: false}, 
      next(); 
     }) 
     function() { 
      $(this).addClass('hideText'); 
     } 
    });