JQuery Event Firing неправильно. Нужно закрыть?

Question

Моя функция запуска второго mouseleave() событие, а не первый, в результате чего nth-child(1) & nth-child(2) иметь .css свойство bottom:99px когда я хочу их использовать первый mouseleave() событие, которое устанавливает свойство bottom:94px

I довольно уверен после некоторого исследования, что мне нужно закрыть мой (этот) оператор, чтобы, когда я вызываю его для второго раунда аргументов, он работает в новой области.?

$(document).ready(function(){ 

    $('#rows').on('mouseenter', "div.row div:nth-child(1), div.row div:nth-child(2)",this , function() { 
     $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    }); 

    $('div',this).off("mouseleave").on("mouseleave", function() { 
     $('img',this).stop().animate({"bottom":"94px"}, "fast");  
    }); 

// need closure here? 

    $('#rows').on('mouseenter', "div.row div:nth-child(3), div.row div:nth-child(4)",this , function() { 
     $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    }); 

    $('div',this).off("mouseleave").on("mouseleave", function() { 
     $('img',this).stop().animate({"bottom":"99px"}, "fast");  
    }); 
}); 

Answer 1

Я собираюсь предположить, что вы хотите:

$('#rows').on('mouseenter', "div.row div:nth-child(1), div.row div:nth-child(2)", this , function() { 
    $('img', this).stop().animate({"bottom":"0px"}, "fast"); 

    // when placed inside, the value of this makes more sense? 
    $('div', this).off("mouseleave").on("mouseleave", function() { 
     $('img',this).stop().animate({"bottom":"94px"}, "fast");  
    }); 
}); 

В этом заявлении, что вы написали, значение this вероятно window, так $('div', this) будет нацелен на все DIV на этой странице.

$('div', this).off("mouseleave").on("mouseleave", function() { 
    $('img',this).stop().animate({"bottom":"94px"}, "fast");  
}); 

Answer 2

Я думаю, что, возможно, следующее, что вам нужно. Этот код не тестировался, но это будет по крайней мере дать вам суть:

$(document).ready(function() { 

    var rows, selector, listeners = {}; 

    rows = $('#rows'); 

    listeners.mouseenter = function() { 

    $('img', this).stop().animate({ "bottom" : "0px" }, "fast"); 

    }; 


    listeners.mouseleave = function (event) { 

    $('img', this).stop().animate(

     { "bottom" : event.data.bottom + "px" }, "fast" 

    ); 

    }; 


    selector = "div.row div:nth-child(1), div.row div:nth-child(2)"; 

    rows.on('mouseenter', selector, listeners.mouseenter); 

    rows.off('mouseleave', selector); 

    rows.on('mouseleave', selector, { bottom : 94 }, listeners.mouseleave); 


    selector = "div.row div:nth-child(3), div.row div:nth-child(4)"; 

    rows.on('mouseenter', selector, listeners.mouseenter); 

    rows.off('mouseleave', selector); 

    rows.on('mouseleave', selector, { bottom : 99 }, listeners.mouseleave); 

}); 

В этом случае, внутри обработчиков this будут элементы, соответствующие селекторы (п-го ребенка div из div.row).