Vertical animation on menu
I'm making a dropdown menu and it's working perfectly with the slideUp/slideDown functions from the jquery api. However - if i want a vertical animation instead i can't find any functions in the api to do that. Can anyone enlighten me :)? Is it possible?
Html
<ul>
<li><a href="">Hvem</a></li>
<li><a href="">Hvad</a>
<ul>
<li class="first-item"><a href="">Produkter</a></li>
<li><a href="">Leveringer</a></li>
</ul>
</li>
<li><a href="">Hvordan</a>
<ul>
<li class="first-item"><a href="">Reklame</a></li>
<li><a href="">PR</a></li>
<li><a href="">Websites</a></li>
<li><a href="">Illustrationer</a></li>
</ul>
</li>
<li class="last-item"><a href="">S??dan!</a></li>
</ul>
Jquery
<!-- Menu animation -->
<script type="text/javascript" src="http://www.hieu.co.uk/blo开发者_运维知识库g/wp-content/plugins/download-monitor/download.php?id=Groject.ImageSwitch.yui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#menu > ul > li:not(.inpath) ul').hide();
$('#menu .inpath ul').show();
$('#menu > ul > li:not(.inpath)').hover(
function() {
$('ul', this).slideDown(300);
$('#menu li.inpath ul').slideUp(300);
}, function() {
$('ul', this).slideUp(300);
$('#menu li.inpath ul').slideDown(300);
});
});
</script>
Try maybe a .slideToggle() function
$('#menu li.inpath ul').slideToggle(300);
It is a kind of "vertical slide" Jquery site
If you mean "horizontal" slide because slide up and slide down are vertical animation you can do
$('.stuff').hide("slide", { direction: "left" }, 400);
$('.stuff').show("slide", { direction: "left" }, 400);
with many parameters this is Jquery link to hide and show documentation
See this very handy article from Karl Swedberg for modifying the slide animations
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
It covers sliding animations in both x and y directions. Should be everything you need to know.
精彩评论