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"); }); });
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"); }); });
Comments
Post a Comment