Skip to content

Instantly share code, notes, and snippets.

@gcao

gcao/slide_over.html

Created November 1, 2011 18:49
Show Gist options
  • Save gcao/1331514 to your computer and use it in GitHub Desktop.
Save gcao/1331514 to your computer and use it in GitHub Desktop.
Download ZIP
Slide animation
Raw
slide_over.html
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div id="test">Test</div>
<div style="top: 20px">
<div id='div1' style="width:100px; height:100px; background:#aaa">
Something goes here.
</div>
<div id='div2' style="display:none; width:100px; height:100px; background: #ccc;">
Something else
</div>
</div>
<script type="text/javascript">
function replace(elem1, elem2, direction){
if (!direction) direction = 'left';
elem2.css({position: 'absolute', top: elem1.position().top, left: elem1.position().left});
elem2.css({'z-index': ''});
elem1.css({'z-index': '-1'});
elem2.show('slide', {direction: direction}, 1000, function(){
elem1.hide();
elem2.css({position: 'relative', top: '', left: ''});
});
}
</script>
<a href="#" onclick="replace($('#div1'), $('#div2')); return false;">Show div2</a>
<a href="#" onclick="replace($('#div2'), $('#div1'), 'right'); return false;">Show div1</a>
<a href="#" onclick="$('#test').css('line-height', '40px'); return false;">Change Test Height</a>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment