3

我有一个 div，当你 mouseenter 时它会预览正在显示的图像 - 当你 mouseleave 时它会再次隐藏它。

我想要实现的是，当您单击该 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

4

您需要使用off：

$("#id").click(function(){
     $("#id").off("mouseleave");
});

见http://api.jquery.com/off/

于 2013-08-07T09:54:45.360 回答
1

试试这个如下：

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

解决它！！！

道歉 - 我用实际图像解除 div 的绑定，而不是触发 mouseenter 和 mouseleave 的 div。

我已经修改了我的代码，所以它现在可以工作了

于 2013-08-08T10:22:11.930 回答
0

使用unbind，在处理程序中添加以下代码click并检查

$(this).unbind('mouseleave');
于 2013-08-07T09:55:35.037 回答
0

您真的不想取消绑定事件您想要做的是使 mouseenter 和 mouseleave 事件有条件，即在.attachment元素被单击时为元素提供一些属性，如 status="clicked" 参见示例：

$('.attachment').on({
        mouseenter: function (e) {
            if($('.attchment').attr('status') != 'clicked'){
                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) {
            if($('.attchment').attr('status') != 'clicked'){
                $('#imageContainer-' + tileID).stop().animate({
                    height: 0
                }, {
                    duration: 300,
                    easing: animationEasing,
                    queue: false,
                    complete: function () {
                        $('#imageContainer-' + tileID).css('visibility', 'collapse');
                    }
                });
            }
        },
        click: function () {

            console.log('clicked ' + tileID);
            $('.attchment').attr('status','clicked');

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

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

        }
    });

如果不再处于单击模式，请确保更改/删除状态。

于 2013-08-07T09:56:34.370 回答