Блоки блокировки мышки '

Введение

Я использую функцию боковой панели Semantic-UI, которая дает вам кнопку, которая запускает боковую панель, которая толкает содержимое слева (в данном случае).

Я хочу развернуть ту же самую боковую панель, наведя указатель мыши с левой стороны. Я понимаю, что есть несколько способов сделать это (как это часто бывает. Может быть, просто проверка положения X мыши будет работать, но это не так); Я решил создать прозрачный div слева и сделать его псевдо-класс :hover для запуска боковой панели:

// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');
// hover transparent div to trigger the sidebar too:
$('.sidebar-trigger').hover(function() {
    $('.ui.sidebar').sidebar('show')
});
// hide() and show() the sidebar accordingly to use the sidebar:
$('.ui.sidebar').sidebar('setting', {
    onShow: function() {
        $('.sidebar-trigger').hide();
    },
    onHidden: function() {
        $('.sidebar-trigger').show();
    }
});

Проблема

Теперь все работает, за исключением одного случая: когда вы не прекращаете перемещать мышь при открытии боковой панели. Я посмотрел на $(document).on('transitionend', function(event) { ... }, и эта мышь эффективно предотвращает переход к завершению.

Ресурсы

Я положил синий фон на мой .sidebar-trigger и сделал небольшое видео /gif, чтобы быть более четким.

Я переместил мышь как сумасшедшее существо, но с естественными жестами проблема также возникает.

Я использую руководство по семантическому интерфейсу по этой теме: http://semantic-ui.com/modules/sidebar.html#/settings (Я также пробовал наVisible и onHide без везения )

Это OSX Yosemite 10.10.3 под управлением Chrome 45.0.2454.101 (64-разрядная версия)

jsfiddle с этой проблемой

PS: Кажется, это может быть ошибка OSX Chrome?

Ответ 1

Я бы попытался использовать one и mouseover:

$('.sidebar-trigger').one('mouseover', function() {
    $('.ui.sidebar').sidebar('show')
});

Затем, когда он закончил анимацию, повторите событие:

 $(document).on('transitionend', function(event) { 
     $('.sidebar-trigger').one('mouseover', function() {
        $('.ui.sidebar').sidebar('show')
     });
 });

Я думаю, что происходит то, что событие hover вызывается несколько раз - каждый раз, когда элемент зависает, затем перебирает дочерний элемент, а затем возвращается назад над элементом hover, и все смешивается с некоторыми точка. Поэтому вам нужно вызывать только show, если это еще не показано.

Ответ 2

Вот рабочий пример: Fiddle

Я считаю, что когда элемент зависал, он добавлял классы "открывать" и "видимый", а другой называл "анимированием", который не срабатывал, пока мышка не перестала двигаться. Я немного изменил jQuery, чтобы добавлять только классы "открывать" и "видеть", и он все еще анимирован. Тем не менее, тело слишком далеко продвигалось на 175 пикселей, поэтому мне пришлось отредактировать класс, который вызывал это (отмечено ниже) от 260 пикселей до 85 пикселей. Это ПОЛУЧАЕТ, что меню действует правильно, хотя из моего понимания.

$('.sidebar-trigger').mouseenter(function() {
    $('.ui.sidebar').addClass('uncover, visible');
    $('body').addClass('mleft175');
});

$('body').click(function() {
    $('.ui.sidebar').removeClass('uncover, visible');
    $('body').removeClass('mleft175');
});

а затем добавьте переопределяющий класс

.ui.visible.left.sidebar ~ .pusher 
{
-webkit-transform: translate3d(85px, 0, 0);
    transform: translate3d(85px, 0, 0);
}

В настоящий момент он установлен, чтобы скрыть меню, когда щелкнут тело. Кроме того, вы можете скрыть его, когда мышь покидает меню боковой панели:

$('.ui.sidebar').mouseleave(function(){
    $(this).removeClass('uncover, visible')
});

Ответ 3

Хорошо, мой первый ответ был (конечно) слишком большой работой для того, что действительно нужно. Кажется, что theVisible работает отлично. Разве это не работало для вас? Демо ЗДЕСЬ

Просто измените "onShow" на "onVisible" в настройке боковой панели:

    $('.ui.sidebar').sidebar('setting', {
        onVisible: function() {
            $('.sidebar-trigger').hide();
        },
        onHidden: function() {
            $('.sidebar-trigger').show();
        }
    });

Как показано на сайте Semantic UI, onVisible срабатывает при запуске анимации. OnShow срабатывает, когда анимация заканчивается. Таким образом, то, что вы делали, скрывало эту синюю/прозрачную полосу, когда анимация была наконец завершена (класс .amimating, отмеченный в моем предыдущем ответе), в отличие от того, когда он начинается. Если вам нужны дополнительные объяснения, пожалуйста, дайте мне знать.