Question

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

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

我意识到问题是什么，我的unbind命令链接到设置为<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');
        });
    })
});

Updated demo

单击然后单击鼠标，错误地解除绑定

1 个答案: