Mouse movement blocks 'transitionend'

Question

Introduction

I'm using Semantic-UI's sidebar functionality, which gives you a button that triggers a sidebar that pushes the content from the left (in this case).

I want to unfold that same sidebar by hovering with the mouse on the left side. I realize there are several ways to do it (as these often do. Maybe just checking the X position of the mouse would work but that's beside the point); I chose to create a transparent div on the left side and make its :hover pseudo-class to trigger the sidebar:

// 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();
    }
});

Problem

Now, it all works except for one occasion: when you don't stop moving the mouse as the sidebar opens. I've looked at $(document).on('transitionend', function(event) { ... } and that mouse effectively prevents the transition to finish.

Resources

I've put a blue background on my .sidebar-trigger and made a small video/gif so as to be clearer.

I moved the mouse like a crazy creature but with natural gestures the problem occurs as well.

I'm using Semantic-UI's guide on this thing: http://semantic-ui.com/modules/sidebar.html#/settings (I've also tried onVisible and onHide with no luck)

This is a OSX Yosemite 10.10.3 running Chrome 45.0.2454.101 (64-bit)

jsfiddle with the problem at hand

PS: It seems it might be an OSX Chrome bug?

Answer 1

I would try using one and mouseover:

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

Then, when it has finished animating, reattach the event:

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

I think what is happening is that the hover event is getting called multiple times - every time the element is hovered, then goes over a child element, and then goes back over the hover element, and things are getting mixed up at some point. So you need to only call show if it's not already shown.