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/

非常感謝SO

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

DEMO

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

}); 
});