2

以下のHTMLを作成しました。黄色のボックスには、画像のサムネイルが含まれています。サムネイルにマウスオーバーすると、サムネイルの上に表示リンクが表示されます。

しかし、マウスを速く動かすと、リンク div がちらつきます。

コードは次のとおりです。コピーして html として貼り付け、テストできます。

<html>
<head>
    <title>Image Gallery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('.divImage').mouseenter(function () {
                var vl = $('#viewlink');
                var vlpos = $(this).position();
                vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
                vl.fadeTo('1', 0.5);
                vl.css('display', 'block');
            });

            $('.divImage').mouseleave(function (event) {
                if (event.toElement.id != 'viewlink') {
                    var vl = $('#viewlink');
                    vl.fadeTo('1', 0.0, function () {
                        vl.css('display', 'block');
                    });
                }
            });

            $('#viewlink').mouseleave(function (event) {
                $(this).fadeTo('1', 0.0, function () {
                    $(this).css('display', 'block');
                });

            });
        });        
    </script>
    <style type="text/css">
        .divImage
        {
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <div id="viewlink" style="width: 100px; height: 30px; display: none; background-color: gray;
        text-align: center; line-height: 30px; vertical-align: middle; z-index: 1000;">
        <a href="Javscript:;" style="text-decoration: underline">View</a></div>
    <div style="width: 398px; height: 518px; border: 1px solid #DADADA; float: left;
        overflow-y: auto; overflow-x: hidden">
        <div style="width: 378px; height: 278px; margin: 10px; background-color: #FFFFFF">
            <table style="margin: 0px; padding: 0px; width: 100%;" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

また、FF 4.0 では mouseleave が呼び出されません。何か案は？

4

3 に答える 3

4

アニメーションキューに蓄積が発生していると思います。追加のアニメーション呼び出しの前にstop（）を呼び出すことにより、これを防ぎます。

編集したコード（stop()それぞれの前に追加されていることに注意してくださいfadeTo()）：

$('.divImage').mouseenter(function () {
            var vl = $('#viewlink');
            var vlpos = $(this).position();
            vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
            vl.stop(true,true).fadeTo('1', 0.5);
            vl.css('display', 'block');
        });

        $('.divImage').mouseleave(function (event) {
            if (event.toElement.id != 'viewlink') {
                var vl = $('#viewlink');
                vl.stop(true,true).fadeTo('1', 0.0, function () {
                    vl.css('display', 'block');
                });
            }
        });

        $('#viewlink').mouseleave(function (event) {
            $(this).stop(true,true).fadeTo('1', 0.0, function () {
                $(this).css('display', 'block');
            });

});
于 2011-06-29T14:54:12.167 に答える
3

hover()ちらつきなしではるかにうまく機能します。

$('.divImage').hover(enter, leave);

function enter() { // mouse enter
    var vl = $('#viewlink');
    var vlpos = $(this).position();
    vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
    vl.fadeTo('1', 0.5);
    vl.css('display', 'block');
};

function leave(event) { // mouse leave
if (event.toElement.id != 'viewlink') {
         var vl = $('#viewlink');
         vl.fadeTo('1', 0.0, function () {
         vl.css('display', 'block');
       });
    }
};
于 2011-06-29T15:01:30.480 に答える
0

css 属性「visibility」を変更できます
$(".element").addClass("visible");
。
.hidden { visibility: hidden; } .visible { visibility: visible; }

お役に立てれば！
NS

于 2011-06-29T14:34:27.980 に答える