Raphael js click, hover и fill

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 имеет один и тот же вопрос

Мы добавили накануне даже MouseLeave с необходимыми действиями:..

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

Мы проверяем, если объект нужен атрибут и триггер Raphael события MouseLeave в цикле для массива

$('.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; 
     }; 
    } 
});