Stop the event stacking!

Stop the event stacking!
0
#1

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(){
   $(this).animate({width:"120px"},500);
};
var shiftIn = function(){
  $(this).animate({width:"10px"},500);
}
$(".off-on").on("mouseover",shiftOut);
$(".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: https://codepen.io/bdfoz/pen/baYvam?editors=0010 )

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

#2

bdfoz,

pure css

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

jquery

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

@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.

#4

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