jquery mouseover not staying selected -
i using tutorial create flip wall: http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/
in tutorial flip element triggered .click event, change .mouseover event.
i ahve setup demo here using .mouseover event. when hover on images , move mouse images flip back.
heres js:
edit: updated code
$(document).ready(function(){ var valid = false; $('.sponsorflip').bind("mouseenter",function(){ elem = $(this); if(!valid){ // using flip method defined plugin: elem.flip({ direction:'lr', speed: 250, onbefore: function(){ // insert contents of .sponsordata div (hidden view display:none) // clicked .sponsorflip div before flipping animation starts: elem.html(elem.siblings('.sponsordata').html()); } }); // setting flag: elem.data('flipped',true); valid = true; } }); $('.sponsorflip').bind("mouseleave",function(){ elem = $(this); elem.revertflip(); valid = false; }); });
does know how prevent flipping when move mouse slightly? element stay flipped until mouse leaves element.
fiddle added http://jsfiddle.net/csdqb/2/
i think reason why having problems elements flipping again when hover on hoverover events being triggered before current event has time finish.
i suggest using stop jquery method here:
elem.stop().flip({
unfortunately half solution because have problem of animation getting cut off early. sorry, i'm not sure how prevent this. identify more permanent solution.
you may find article helpful: http://css-tricks.com/full-jquery-animations/
Comments
Post a Comment