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

Jクエリ

$("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 に答える