Raphael js點擊，懸停並填充

Question

我正在使用Raphael js作爲計劃中的別墅形狀的村莊計劃。當我徘徊在小屋時，他們充滿了色彩。當我點擊一個小屋時，會出現一個小窗口顯示一些信息。當我從該窗口離開光標時，它會消失。除了形狀的填充以外，一切都像我需要的一樣工作。當我離開文本窗口時，我需要填充形狀以消失。但它仍然存在。出於某種原因，它只適用於我添加的最後一個小屋。當窗戶已經隱藏起來時，其他小屋充滿了色彩。

這是我的代碼：

var canvas = Raphael(canvas_setup.canvas_id, canvas_setup.canvas_width, canvas_setup.canvas_height), 
    speed_anim_in = 400, 
    speed_anim_out = 150, 
    cottage_color_start = '#fff', 
    cottage_color_end = '#fff', 
    cottages_array = []; 

for (var i = village_area.length - 1; i >= 0; i--) { 
    canvas.setStart(); 
    var obj = village_area[i]; 
    canvas.image(obj.plan_image, 0, 0, canvas_setup.canvas_width, canvas_setup.canvas_height); 

    for (var j = 0; j < obj.cottages.length; j++) { 
     var obj_cottages = obj.cottages[j], 
     my_path = canvas.path(obj_cottages.coords); 
      my_path 
       .attr({stroke: "none", fill: cottage_color_start, "fill-opacity": 0.8, opacity: 0, cursor: "pointer"}) 
       .data('type', obj_cottages.type) 
       .data('start_color', cottage_color_start) 
       .data('end_color', cottage_color_end) 
       .data('clicked', false) 
       .hover(
        function(){ 
         this.attr({fill: this.data('start_color'), opacity: 1}).animate({fill: this.data('end_color')}, speed_anim_in); 
        }, 
        function(){ 
         if(!this.data('clicked')) { 
          this.animate({fill: this.data('start_color'), opacity: 0}, speed_anim_out); 
         } 
        } 
       ) 
       .click(function (e) { 
        this.attr({fill: this.data('start_color'), opacity: 1}); 
        this.data('clicked', true); 
        $('.cottage_info').html(
         '<div>Cottage ' + this.data('type') + '</div>' 
        ).show(); 
        $('.cottage_info').css({'left': e.pageX-44 + 'px', 'top': e.pageY-150 + 'px'}); 
        $('.cottage_info').mouseleave(function() { 
         $(this).hide(); 
         my_path 
          .attr({stroke: "none", fill: cottage_color_start, "fill-opacity": 0.8, opacity: 0, cursor: "pointer"}) 
          .data('clicked', false) 
         this.animate({fill: this.data('start_color'), opacity: 0}, speed_anim_out); 
        }); 
        return false; 
       }); 
    }; 
    cottages_array.push(canvas.setFinish()); 

有人能幫助我嗎？我不知道如何使它正確工作。如果我只有一個小屋，它完全符合我的需要，但如果有多於一個，它會遺失一切:(

Answer 1

好吧，我的同事幫助我，所以我在這裏寫一個案例someones有同樣的問題

我們增加前夕甚至對於需要採取行動鼠標離開：

eve.on('raphael.event.mouseleave', function(){ 
    this.animate({opacity: 0}, speed_anim_out); 
    this.data('clicked', false); 
}); 

我們檢查對象是否需要屬性，並觸發拉斐爾鼠標離開事件對陣列週期。

$('.cottage_info').mouseleave(function() { 
    $(this).hide(); 
    for (var x = 0; x < cottages_array.length; x++) { 
     if (cottages_array[x].data('clicked')) { 
      eve('raphael.event.mouseleave', cottages_array[x]); 
      break; 
     }; 
    } 
});