Question

My function is triggering the second mouseleave() event rather than the first one, resulting in nth-child(1) & nth-child(2) to have a .css property of bottom:99px when i want them to use the first mouseleave() event which sets the property to bottom:94px

I am fairly sure after some research that i need to close my (this) statement so that when i call it in for the second round of arguments it works within the new scope..?

$(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

I’m going to guess that you want this:

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

In this statement that you wrote, the value of this is probably window, so $('div', this) would target all div on the page.

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