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> Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.