CODEWITHSUNDEEP
jqueryanimation
Gareth
Gareth

Reputation: 307

jQuery Animation Delay Adding A Class

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')
    });

});

Upvotes: 7

Views: 603

Answers (2)

suzumakes
suzumakes

Reputation: 770

Have you tried queueing the function like this?

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

Upvotes: 0

Interrobang
Interrobang

Reputation: 17434

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');
            }
        );
    });
});

Upvotes: 2

Related Questions