jQuery动画延迟添加类

Question

我正在尝试使用jQuery延迟添加类。所有代码都运行良好，但我想要延迟.addClass('hideText')直到鼠标移开函数完成后。请问有人可以展示如何实现吗？

以下是代码：

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

});

- Gareth

Answer 1

将.addClass()代码放在回调函数中：

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

- Interrobang

---

嗨，感谢您的帮助，不幸的是那并没有起作用。.listing div 仍然可以正常上下动画，而 .hideText 类在最初被添加和移除后，在动画完成后不会再次添加。 - Gareth

请提供一个示例链接。 - Interrobang

Answer 2

你尝试过像这样将函数排队吗？

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

- suzumakes

---

嗨，Keith。很抱歉这么久以前的事情我已经忘记了如何解决它。不过还是感谢您花时间回答。 - Gareth