M.O.S. Studios Posted May 12, 2011 Share Posted May 12, 2011 made a cool effect for menu items. your menu item background color rises and lowers when your cursor goes over the menu item. This code works well but messes up with over use. any ideas? Here is my code ajax $(document).ready(function(){ $('.menu_item').bind('mouseenter', function(){ var ele = $(this).children('.bg'); var eleHeight = ele.css('minHeight'); ele.animate({"height": "100%"}, "slow"); ele.bind('mouseleave', function(){ ele.animate({"height": eleHeight}, "slow"); }); }); }); html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html> <head> <link rel="stylesheet" href="main.css" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div class='body'> <div class='header'> <div class='menu_item'><div class='bg'> </div><div class='text'>Home</div></div> <div class='menu_item'><div class='bg'> </div><div class='text'>Jewelery</div></div> <div class='menu_item'><div class='bg'> </div><div class='text'>Decore</div></div> <div class='menu_item'><div class='bg'> </div><div class='text'>Find us</div></div> </div> <div class='content'> </div> <div class='footer'> <div class='foot_item'><div class='bg'> </div><div class='text'>Contact</div></div> <div class='foot_item'><div class='bg'> </div><div class='text'>Twiter</div></div> <div class='foot_item'><div class='bg'> </div><div class='text'>Etsy</div></div> </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/236276-cool-effect-bad-resaults/ Share on other sites More sharing options...
jcanker Posted May 13, 2011 Share Posted May 13, 2011 I assume by "over use" you mean someone moving the mouse around too much, too fast? You have the effects on slow, and every time the mouse moves to another item, it fires the animation and adds it to the stack of animations to be run. Since you're using jQuery (wise choice!), just use clearQueue at the start of the event. Here's a link to the jQuery API for clearQueue: http://api.jquery.com/clearQueue/ You can also speed up the animation time to minimize the "overuse" problems (also, as an aside and not to sound snotty, but the first code snippet isn't ajax, it's just straight-up jQuery. Just a slip of the virtual tongue, I'm sure Link to comment https://forums.phpfreaks.com/topic/236276-cool-effect-bad-resaults/#findComment-1214818 Share on other sites More sharing options...
M.O.S. Studios Posted May 13, 2011 Author Share Posted May 13, 2011 You dont sound snoody, i actually knew it wasn't ajax. and i feel like a total noob now!! oh well.. I'll make the suggested change and report back Link to comment https://forums.phpfreaks.com/topic/236276-cool-effect-bad-resaults/#findComment-1215159 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.