3

マウスを入力すると、表示されている画像をプレビューするdivがあります-マウスを離れると、再び非表示になります。

私が達成しようとしているのは、そのdivをクリックしてアニメーション化して表示することですが、「mouseleave」機能をバインド解除して、画像が機能しない画面にとどまるようにしたいと思います-mouseleaveはまだ起動しています.... 手伝ってくれますか？

これが私のコードです

$('.attachment').on({
    mouseenter: function (e) {
        tileID = (this.parentNode.id).substring(13);
        $('#imageContainer-' + tileID).css('visibility', 'visible');
        $('#imageContainer-' + tileID).css('overflow-y', 'hidden');
        $('#imageContainer-' + tileID).stop().animate({
            height: 40
        }, {
            duration: 300,
            easing: animationEasing,
            queue: false
        });

    },
    mouseleave: function (e) {
        $('#imageContainer-' + tileID).stop().animate({
            height: 0
        }, {
            duration: 300,
            easing: animationEasing,
            queue: false,
            complete: function () {
                $('#imageContainer-' + tileID).css('visibility', 'collapse');
            }
        });

    },
    click: function () {

        $('#attachmentLink-' + tileID).unbind('mouseleave');

        $('#imageContainer-' + tileID).stop().animate({
            height: 610
        }, {
            duration: 300,
            easing: animationEasing,
            queue: false,
            complete: function () {
                $('#imageContainer-' + tileID).css('overflow-y', 'auto');
            }
        });
    }
});

参照用の HTML コード:

 <div id="timelineContainer">

        <div id="timelineTopHider"></div>
        <div id="timelineBottomHider"></div>

        <ul class="timeline">

            <li id="timelineLI-1">

                <div class="timelineIcon letter"></div>

                <div class="dateContainer">

                    <p>
                        12th July 2013<br>
                        17:13
                    </p>

                </div>

                <div class="timelineTile" id="timelineTile-1">

                    <a href="javascript:animateTile('1');" class="fillDiv"></a>

                    <div class="tileTitleContainer" id="tileTitleContainer-1">
                        <span title="This is a really long title to test the application of text ellipsis and should concatenate the string">Test Title</span>
                    </div>

                    <div class="details" id="details-1">
                        <table>
                            <tr>
                                <td>Name:</td>
                                <td>Full Name</td>
                            </tr>
                            <tr>
                                <td>Type:</td>
                                <td>Credit</td>
                            </tr>
                        </table>

                    </div>

                    <div class="arrow" id="arrow-1"></div>

                    <div class="attachment" id="attachmentLink-1"></div>



                    <div class="slideUpInfo" id="slideUpInfo-1">

                        <p>
                            Name<br>
                            Info<br>
                            12th July 2013, 17:13
                        </p>

                    </div>

                    <div class="iconContainer hidden">
                        <a href="javascript:toggleImageContainer(1);" id="iconContainerLink-1">
                            <img src="images/attachment.png" /></a>
                    </div>

                    <div class="imageContainer hidden" id="imageContainer-1">

                        <img src="images/documents/1.png" />

                    </div>

                </div>

            </li>

            </ul>

        </div>
4

5 に答える 5

1

以下のようにこれを試してください：

  $("#id").click(function(){
     $("#id").unbind("mouseleave");
  });
于 2013-08-07T09:52:26.867 に答える
0

修正しました!!!

お詫び - mouseenter と mouseleave を起動する div ではなく、実際の画像で div のバインドを解除していました。

コードを修正したので、現在は機能しています

于 2013-08-08T10:22:11.930 に答える