css - Jquery Animation behavior -
say have 4 divs want animate.
1st div shows fish, 2nd div shows box, 3rd fish shows locker , 4th div shows top of box. have achieved far animate div follows:
the fish goes right left until comes same vertical level box, fish animated towards box, box top closes , locker appears. animations proceeds scroll mouse.
this code:
var fish_animation = $(".fish-animation"); var boxtop_animation = $(".boxtop-animation"); var locker_animation = $(".locker-animation"); if(height == 100){ fish_animation.css({ right:'120px'}, { duration: 100, easing: 'easeinsine'}); } else if (height == 200) { fish_animation.css({right:'230px'}, { duration: 100, easing: 'easeinsine'}); } else if (height == 300) { fish_animation.css({right:'340px'}, { duration: 100, easing: 'easeinsine'}); } else if (height == 400) { fish_animation.css({right:'450px'}, { duration: 100, easing: 'easeinsine'}); } else if (height == 500) { fish_animation.css({right:'560px'}, { duration: 100, easing: 'easeinsine'}); } else if (height == 600) { fish_animation.css({top:'270px'}, { duration: 400, easing: 'easeinsine'}); } else if (height == 700) { fish_animation.hide(); fish_animation.removeclass('fish-graphic-blue'); fish_animation.addclass('fish-graphic-white'); fish_animation.fadein('normal'); fish_animation.css({ 'zindex' : '1000' }); } else if (height == 800) { boxtop_animation.css({'top' : '-10px', 'right' : '-233px'}); boxtop_animation.rotate({animateto:-90}); } else if (height == 900) { kleidaria_animation.fadein('fast'); }
when start scrolling top of page bottom goes intended. here problem. refresh while have scrolled point of 700px. animation messed up. steps shown in incorrect order. unsure or how proceed solve this. has suggestions?
thank
Comments
Post a Comment