Question

I am trying to delay the adding of a class using jquery. All the code works fine but I would like to delay the .addClass('hideText') until after the hover out function completes could someone show me how to do this please?

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

Place the .addClass() line in a 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');
            }
        );
    });
});