Click then mouseout, incorrectly unbinding

Question

I have a news list type display, appearing in a series of list items, I have made the content of my news item intentionally larger than the <li> and set the overflow to hidden. What I want to do is that when you click on an <li> item, it scrolls the content upwards (so that you see the previously hidden content) then if your mouse leaves the <li> item, it will wait a few seconds before returning to its original state. I have managed to get it to do pretty much this, however I have not unbound the mouseout action properly, so if you run your mouse over the <li> item again, it will run the delay counter again

Here is my current jsfiddle example

You can see what its doing wrong by clicking on an item, mouse out and wait for it to drop, then running your mouse back and forth over that one again, and then clicking on it, it should delay for a long time.

Any help would be greatly appreciated.

HTML

<ul>
    <li>
        <img src="http://dummyimage.com/150x150/000/fff.png" width="150" height="150" />
        <div class="header">Lorem Ipsum</div>
        <div class="body">Suspendisse et gravida quam. Suspendisse potenti. Suspendisse ornare congue sapien, vel vulputate quam euismod cursus. Vivamus id cursus nisl. Phasellus dolor nisi, elementum eget vestibulum a, pulvinar sed est.</div>
    </li>
    <li>
        <div class="img">IMAGE</div>
        <div class="header">Lorem Ipsum</div>
        <div class="body">Suspendisse et gravida quam. Suspendisse potenti. Suspendisse ornare congue sapien, vel vulputate quam euismod cursus. Vivamus id cursus nisl. Phasellus dolor nisi, elementum eget vestibulum a, pulvinar sed est.</div>
    </li>

CSS

* {
    margin:0;
    padding:0;
}
ul li {
    max-width:150px;
    max-height:200px;
    overflow:hidden;
    border:solid 1px red;
    display:block;
    float:left;
    margin: 0.5em;
}
ul li * {
    position: relative;
}
ul li .img {
    line-height:150px;
    text-align:center;
}
ul li .header {
    height: 30px;
    background: grey;
    color: #FFF;
    text-align:center;
    padding: 10px;
}
ul li .body {
    background: cyan;
    padding: 20px;
    height: 160px;
}

Jquery

$("li").click(

function () {
    content = $(this).children();
    content.animate({
        "top": "-200px"
    });

    $(this).mouseout(function () {
        content.delay(1000).animate({
            "top": "0px"
        }, function() {
            $(this).unbind('mouseout');
        });
    })

});

Answer 1

I realised what the problem was, my unbind command was linked to the content variable which was set to the items inside the <li> item, so I modified the code slightly to find the parent item and that correctly disabled the unbinding.

JQuery

$("li").click(

function () {
    content = $(this).children();
    content.animate({
        "top": "-200px"
    });

    $(this).mouseout(function (event) {
        content.delay(1000).animate({
            "top": "0px"
        }, function() {
            $(this).closest('li').unbind('mouseout');
        });
    })
});

Updated demo