jQuery を使用してインタラクティブ マップを作成していますが、解決できない問題がいくつかあります。
基本的に、黒い四角をクリックするとすぐに赤くなりたいのですが、今は逆に機能します（2回目のクリックから赤くなります）。fadeToggle();を逆にする方法はありますか? 関数？しかし、私はまだマウスオーバーとマウスアウトのイベントでアニメーションをフェードさせたいと思っています。
2番目の問題は、黒い四角を「単独で」クリックするか、左側の「オプションリンク」をクリックすると赤に変わりますが、ホバーしても赤のままではありません。（正方形がクリックされた後、どうにかして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();
});
});
}