[jQuery] Animated menu, help needed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16674" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV><FONT face=Arial size=2>Hi all!</FONT></DIV>
<DIV><FONT face=Arial size=2>I' rather new to jQuery and
javascript..</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>I'm making a animated menu, but have some
problems.</FONT></DIV>
<DIV><FONT face=Arial size=2>My page is <A
href="http://g-sun.no/Web-design/Web-design_kmeny.php">here</A> (go for the
animated button)</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>I want the ul-list to show up and animating
into position when hovering the button. Then back again on
mouseOut.</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>Firefox 3: Works, but seems unstable (The "width"
and "height" is hanging)</FONT></DIV>
<DIV><FONT face=Arial size=2>IE7: Doesn't work</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>What can I do about it? Sugestions?</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>My code is:</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2><script
type="text/javascript"><BR> $(document).ready(function(){<BR> $('#K_meny
li').hide()<BR> .css({<BR> left:
"10px",<BR> top: "11px" ,<BR> zIndex:
"5"<BR> })<BR> ;<BR> });<BR></script></FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2><script type="text/javascript"></FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2> $(document).ready(function(){<BR> $('#K_meny').hover(function(){<BR> <BR> $('#K_meny
li')<BR> .stop()<BR> .css({opacity:""})<BR> .show({
queue:false, duration:1000 });<BR> <BR> $('#K_meny
li.one').animate({<BR> top: "-21px",<BR> left:
"45px" <BR> } , { queue:false, duration:1000
}<BR> )<BR> $('#K_meny
li.two').animate({<BR> top: "15px",<BR> left:
"55px"<BR> } , { queue:false, duration:1000
}<BR> )<BR> $('#K_meny
li.three').animate({<BR> top:
"50px",<BR> left: "40px"<BR> } , {
queue:false, duration:1000 }<BR> )<BR> $('#K_meny
li').show({ queue:false, duration:1000
})<BR> ;<BR> <BR> } ,
function(){ //MouseOut<BR> $('#K_meny
li')<BR> .stop()<BR> .animate({<BR> top:
"11px" ,<BR> left: "10" ,<BR> } ,
{queue:false, duration:1000 });<BR> $('#K_meny li').hide
({queue:false,
duration:2000});<BR> }<BR> <BR> );<BR> });<BR></script><BR></FONT></DIV>
<DIV><FONT face=Arial size=2>----------------------------<BR>Geir Solerød<BR><A
href="http://G-Sun.no">http://G-Sun.no</A></FONT></DIV></BODY></HTML>