JQuery animation delay Adding a class

Question

I am trying to defer adding a class using jquery. All code is working fine, but I would like to defer .addClass('hideText') until the hover function is complete, can someone show me how to do this?

Here is the code:

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

Put the line .addClass() in the callback:

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

Have you tried the function in the queue this way?

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