jquery - 点击然后鼠标移开，错误解除绑定(bind)

Question

我有一个新闻列表类型显示，出现在一系列列表项中，我故意使新闻项的内容大于 <li>并将溢出设置为隐藏。我想做的是，当你点击 <li>项目，它会向上滚动内容(以便您看到之前隐藏的内容)，然后如果您的鼠标离开 <li> item，它将等待几秒钟，然后返回到原始状态。我已经设法让它做到这一点，但是我还没有解除 mouseout 的绑定(bind)。正确操作，因此如果您将鼠标移到<li>上再次项目，它将再次运行延迟计数器

Here is my current jsfiddle example

您可以通过单击一个项目，将鼠标移出并等待其落下，然后再次在该项目上来回运行鼠标，然后单击它来查看它做错了什么，它应该会延迟很长时间.

任何帮助将不胜感激。

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

我意识到问题是什么，我的取消绑定(bind)命令链接到内容变量，该变量设置为 <li> 内的项目。项，因此我稍微修改了代码以找到父项，并正确禁用了解除绑定(bind)。

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