"
Team:SJTU-Software/Project
From 2014.igem.org
(Difference between revisions)
| Line 172: | Line 172: | ||
</div> | </div> | ||
| + | |||
| + | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/ra.js%20?action=raw&ctype=text/js"></script> | ||
| + | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/ras.js%20?action=raw&ctype=text/js"></script> | ||
| + | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/gi.js%20?action=raw&ctype=text/js"></script> | ||
| + | <script type="text/javascript"> Cufon.now(); </script> | ||
| + | |||
| + | |||
| + | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/jquery.js%20?action=raw&ctype=text/js"></script> | ||
| + | <script type="text/javascript"> | ||
| + | $(function() { | ||
| + | /** | ||
| + | * for each menu element, on mouseenter, | ||
| + | * we enlarge the image, and show both sdt_active span and | ||
| + | * sdt_wrap span. If the element has a sub menu (sdt_box), | ||
| + | * then we slide it - if the element is the last one in the menu | ||
| + | * we slide it to the left, otherwise to the right | ||
| + | */ | ||
| + | $('#sdt_menu > li').bind('mouseenter',function(){ | ||
| + | var $elem = $(this); | ||
| + | $elem.find('img') | ||
| + | .stop(true) | ||
| + | .animate({ | ||
| + | 'width':'170px', | ||
| + | 'height':'170px', | ||
| + | 'left':'0px' | ||
| + | },400,'easeOutBack') | ||
| + | .andSelf() | ||
| + | .find('.sdt_wrap') | ||
| + | .stop(true) | ||
| + | .animate({'top':'140px'},500,'easeOutBack') | ||
| + | .andSelf() | ||
| + | .find('.sdt_active') | ||
| + | .stop(true) | ||
| + | .animate({'height':'170px'},300,function(){ | ||
| + | var $sub_menu = $elem.find('.sdt_box'); | ||
| + | if($sub_menu.length){ | ||
| + | var left = '170px'; | ||
| + | if($elem.parent().children().length == $elem.index()+1) | ||
| + | left = '-170px'; | ||
| + | $sub_menu.show().animate({'left':left},200); | ||
| + | } | ||
| + | }); | ||
| + | }).bind('mouseleave',function(){ | ||
| + | var $elem = $(this); | ||
| + | var $sub_menu = $elem.find('.sdt_box'); | ||
| + | if($sub_menu.length) | ||
| + | $sub_menu.hide().css('left','0px'); | ||
| + | |||
| + | $elem.find('.sdt_active') | ||
| + | .stop(true) | ||
| + | .animate({'height':'0px'},300) | ||
| + | .andSelf().find('img') | ||
| + | .stop(true) | ||
| + | .animate({ | ||
| + | 'width':'0px', | ||
| + | 'height':'0px', | ||
| + | 'left':'85px'},400) | ||
| + | .andSelf() | ||
| + | .find('.sdt_wrap') | ||
| + | .stop(true) | ||
| + | .animate({'top':'25px'},500); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
</table> | </table> | ||
</html> | </html> | ||
Latest revision as of 06:07, 7 October 2014
