javascript - How to add multiple event(mouseover/mouseout) into one selector -


if mouseover/mouseout fast more 1 time during animation times (here 900). button animating more 1 time; when stopped mouse activity.

i want take 1 event animation during animation times .even when multiple event triggered. other way want if triggered multiple mouseover event during 900 terminate when triggered mouseout , vice-versa.

$(document).ready(function () {     $("button").mouseover(function () {         $(this).css({             background: 'transparent',             color: '#09f'         });         $("button").animate({             width: "110%",         }, 900);         $(this).text("show more >");     });     $("button").mouseout(function () {         $(this).css({             background: '#09f',             color: '#fff'         });         $("button").animate({             width: "100%",         }, 900);         $(this).text("show more");     }); }); 

here's jsfiddle show behaviour

you need use .stop()

stop currently-running animation on matched elements.

use

$(document).ready(function () {     $("button").mouseover(function () {         $(this).css({             background: 'transparent',             color: '#09f'         });         $("button").stop().animate({ //here used stop             width: "110%",         }, 900);         $(this).text("show more >");     });     $("button").mouseout(function () {         $(this).css({             background: '#09f',             color: '#fff'         });         $("button").stop().animate({ //here used stop             width: "100%",         }, 900);         $(this).text("show more");     }); }); 

demo


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -