JQuery - отображение div на мышинке - PullRequest
Новая
       8

JQuery - отображение div на мышинке

2 голосов
/ 29 июня 2011

Я создал следующий HTML. Желтые поля содержат миниатюры изображений. При наведении курсора мыши на миниатюру в верхней части миниатюры отображается ссылка на просмотр.

Но если я быстро перемещаю мышь, я получаю ссылку для мерцания.

Вот код - вы можете скопировать и вставить его как 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>

Кроме того, mouseleave не вызывается в FF 4.0. Есть идеи?

Ответы [ 3 ]

4 голосов
/ 29 июня 2011

Я предполагаю, что вы столкнулись с наращиванием в очереди анимации. Чтобы предотвратить это, вызовите 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');
            });

});
3 голосов
/ 29 июня 2011

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');
       });
    }
};
0 голосов
/ 29 июня 2011

Вы можете изменить атрибут css "видимость":
$(".element").addClass("visible");
где
.hidden { visibility: hidden; } .visible { visibility: visible; }

Надеюсь, это поможет!
NS

...