jquery - keep animated element visible on mouse over -
jquery - keep animated element visible on mouse over -
i using code panel , image name slide out below image:
$( ".image-wrapper a" ).on 'mouseenter', -> $(this).next('.panel').animate bottom: "-40px" , 300 homecoming $( ".image-wrapper a" ).on 'mouseleave', -> $(this).next('.panel').animate bottom: "0px" , 300 homecoming
right when mouseover .panel slide because of mouseleave event on tag.
how can maintain panel open on mouseenter of tag , when on panel , maintain behavior of mouseleave event?
here's fidddle
http://jsfiddle.net/d5e40mw8/4/
try code: coffee script:
$(".image-wrapper img,.panel").mouseenter -> $(".panel").stop().animate bottom: -40 , 300 homecoming $(".image-wrapper img,.panel").mouseleave -> $(".panel").stop().animate bottom: 0 , 300 homecoming
enter ".image-wrapper img" , ".panel" elements animate ".panel" (i added .stop() animate evade animation bugs). if leave elements ".panel" hide again.
jquery mouseevent
Comments
Post a Comment