我正在使用 jQuery 制作交互式地图，但遇到了一些我无法解决的问题。
基本上，当我单击黑色方块时，我希望它立即变为红色，而现在它正好相反（第二次单击后变为红色）。有没有办法逆转fadeToggle(); 功能？但是，我仍然想在mouseover和mouseout事件上保持淡化动画。
第二个问题是，在“单独”单击黑色方块或单击左侧的“选项链接”后，它会变成红色，但当我将鼠标悬停在它上面时不会保持红色。（我想在单击正方形后以某种方式取消绑定mouseover和mouseout事件）。当我再次点击它时，它只会淡出到 0。
演示：http: //jsfiddle.net/antondesign/8JHCe/
jQuery 脚本
$('ul.list li a').click(function(e) {
e.preventDefault();
var productTitle = $(this).attr("title");
$('.p-'+ productTitle).siblings().hide();
$('.p-'+ productTitle).stop(true, true).animate({ opacity: "show" }, "slow");
$('.p-'+ productTitle).unbind('mouseover mouseout');
});
// Check if map exists
if($('#map')) {
// Loop through each AREA in the imagemap
$('#map area').each(function() {
var productIcon = $(this).attr('id').replace('area-', '');
// Assigning an action to the click event
$(this).click(function(e){
e.preventDefault();
$('#'+productIcon).stop(true, true).fadeToggle('slow', function(e){
$(this).unbind('mouseover').unbind('mouseout');
});
});
// Assigning an action to the mouseover event
$(this).bind("mouseover", function(e) {
$('#'+productIcon).stop(true, true).fadeTo(500, 1);
e.preventDefault();
});
// Assigning an action to the mouseout event
$(this).bind("mouseout", function(e) {
$('#'+productIcon).stop(true, true).fadeOut(500, 0);
e.preventDefault();
});
});
}