jQuery Animation Delay Aggiunta di una classe

Question

Sto tentando di ritardare l'aggiunta di una classe utilizzando jquery. Tutto il codice funziona bene ma vorrei ritardare lo .addClass('hideText') fino a quando la funzione di passaggio del mouse non è completa, qualcuno potrebbe mostrarmi come farlo per favore?

Ecco il codice:

$(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

Posizionare la linea .addClass() in una richiamata:

$(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

Hai provato in coda la funzione come questa?

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