2

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

这是我当前的 jsfiddle 示例

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

任何帮助将不胜感激。

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

});
4

1 回答 1

0

我意识到问题出在哪里，我的取消绑定命令链接到内容变量，该变量设置为项目内的<li>项目，所以我稍微修改了代码以找到父项目并正确禁用了取消绑定。

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

更新的演示

于 2013-05-21T14:18:41.250 回答