Stop the event stacking!

Stop the event stacking!
0.0 0


I’m working on my twitch stream project. In attempt to mimic the “online” and “offline” links that pull out from the side, this is what i’m doing:

var shiftOut = function(){
var shiftIn = function(){
$(".off-on").on("mouseout", shiftIn);

This is working, but given the time delay, if you mouse on/off before letting the timer run out, the events stack and the div pulls in/out multiple times (see here: )

I tried using .off() and .stopPropagation(), but i had no success. Any suggestions?



pure css

.off-on {width: 11px; transition: width .5s ease;}
.off-on:hover {width: 120px;}


$('.off-on').hover(function() {
    $(this).stop().animate({ width: '120px' }, 500);
}, function() {
    $(this).stop().animate({ width: '10px' }, 500);
// ref:


@pseudop, Thanks so much for your suggestion! My 9-to-5 is taking a lot of my time the next few days, but i’m going to give this a shot Sunday afternoon. I’ll let you know how this works out.


Your solution worked really well. I played around with .stop() and found that this worked too:

$('.off-on').hover(function() {
    $(this).stop(true).animate({ width: '60px' }, 500);
}, function() {
    $(this).animate({ width: '10px' }, 500);