[jQuery] .animate , display:"none" not working
Hi!
I have a problem on an animated hover-out. The display (#K_meny li)
sticks to "block". And I want to get it to "none". What is the problem
and what can I do?
I also have a minor problem on not getting the z-index I want. The
"#K_meny li" comes on top no matter what I do. Solutions?
Thanks!
<script type="text/javascript">
$(document).ready(function(){
$('#K_meny li').hide()
.css({
left: "10px",
top: "11px" ,
zIndex: "5"
})
;
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#K_meny').hover(function(){
$('#K_meny li').stop;
$('#K_meny li.one').animate({
top: "-21px",
left: "45px"
} , { queue:false, duration:1000 }
)
$('#K_meny li.two').animate({
top: "15px",
left: "55px"
} , { queue:false, duration:1000 }
)
$('#K_meny li.three').animate({
top: "50px",
left: "40px"
} , { queue:false, duration:1000 }
)
$('#K_meny li').show({ queue:false, duration:1000 });
} , function(){ //MouseOut
$('#K_meny li')
.stop;
$('#K_meny li')
.animate({
display: "none" ,
top: "11px" ,
left: "10" ,
} , 1000);
}
);
});
</script>
HTML:
<div id="K_meny">
<img src="../Grafikk/Knapp_anm.gif" alt="Knappemeny"
width="59"
height="59" />
<ul>
<li class="one" ><a href="#">Inspirerende</a></li>
<li class="two"><a href="#"> Takk til..</a></li>
<li class="three"><a href="#"> G-Sun.no</a></li>
</ul>
</div>
Thanks!
Ref:
http://groups.google.com/group/jquery-en/browse_frm/thread/10ce43d5f882b642/53a9f6431554df76#53a9f6431554df76