Skip to content

Instantly share code, notes, and snippets.

@jonhurlock

jonhurlock/dan_jquery_ani.html

Created September 22, 2011 14:25
Show Gist options
  • Save jonhurlock/1234891 to your computer and use it in GitHub Desktop.
Save jonhurlock/1234891 to your computer and use it in GitHub Desktop.
Download ZIP
jquery animations for menu
Raw
dan_jquery_ani.html
<html>
<head>
<script src="http://www.sucs.org/~jonhurlock/assets/js/jquery-latest.js"></script>
<style>
#menulist li {float: left; list-style: none; padding-left: 1em;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".hidden").css("opacity", 0).css("background", "red");
$('li.one').mouseenter(function() {
$('div').animate({
opacity: 0,
}, 500, function() {
$("div").css("display","none");
$("#one").css("display","block");
$('#one').stop().animate({
opacity: 1,
}, 500, function() {
// Animation complete.
});
});
});
$('li.two').mouseenter(function() {
$('div').animate({
opacity: 0,
}, 500, function() {
$("div").css("display","none");
$("#two").css("display","block");
$('#two').stop().animate({
opacity: 1,
}, 500, function() {
// Animation complete.
});
});
});
$("div").mouseleave(function(){
$(this).animate({
opacity: 0,
}, 500, function() {
$("div").css("display","none");
});
});
});
</script>
</head>
<body>
<ul id="menulist">
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
<li class="four">four</li>
</ul><br/>
<div id="one" class="hidden one">text for first</div>
<div id="two" class="hidden two">text for second</div>
<div id="three" class="hidden three">text for third</div>
<div id="four" class="hidden four">text for fourth</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment