Stop the event stacking!

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?

1 Like

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 Likes

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

1 Like

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