jquery - 添加类上的 addClass() 之后的 JQuery 函数

Question

$('#closecallout').click(function() {
    $('.callout').animate({"right" : "-260px"}, 500).addClass('calloutclosed');
});
$('.calloutclosed').hover(function() {
    $(this).animate({"right" : "0px"}, 500);
}, function() {
    $(this).animate({"right" : "-260px"}, 500);
});

单击功能旨在“隐藏”标注框，然后，当悬停时，它将重新回到焦点。

为什么悬停功能不起作用？是因为它们都在一个jQuery(function($){ });?

我应该采取什么措施来纠正这个问题？

http://jsfiddle.net/R5Dmu/

非常感谢所以

Answer 1

要根据元素的当前类触发事件，您需要将事件委托与.on().

$('#closecallout').click(function() {
    $('.callout').animate({"right" : "-260px"}, 500).addClass('calloutclosed');
});
$(document).on('mouseover', '.calloutclosed', function() {
    $(this).animate({"right" : "0px"}, 500);
}).on('mouseout', '.calloutclosed', function() {
    $(this).animate({"right" : "-260px"}, 500);
});

演示

Answer 2

当您调用点击功能时，您需要添加类并实现悬停功能。在您的代码中，您在单击事件上添加了类，但未实现悬停功能。您在准备好的文档上实现悬停功能，然后 Jquery 可以找到带有 calloutclosed 类的选择器，因为还没有点击事件。

检查这个：

jQuery(function ($) {

//CALLOUT
$('#closecallout').click(function () {
    $('.callout').animate({
        "right": "-260px"
    }, 500)
    $('.callout').addClass('calloutclosed');

    $('.calloutclosed').hover(function () {
        $(this).animate({
            "right": "0px"
        }, 500);
    }, function () {
        $(this).animate({
            "right": "-260px"
        }, 500);
    });

});
});