over 11 years ago
This code is used to hide div by slding effect towards right to left and show another div by the same sliding effect on its place .
- <script src="js/jquery.min.js" language="javascript" type='text/javascript'></script>
- <script src="js/jquery-ui.js" language="javascript" type='text/javascript'></script>
- <script>
- $(document).ready(function () {
- var maxHeight = 0;
- $('.slidingDiv').each(function() {
- if($(this).height() > maxHeight) maxHeight = $(this).height();
- });
- $('#wrapper').height(maxHeight);
- $('#click1').click(function () {
- $('#box1').hide("slide", {
- direction: "left"
- }, 1000);
- $('#box2').show("slide", {
- direction: "right"
- }, 1000);
- });
- $('#click2').click(function () {
- $('#box2').hide("slide", {
- direction: "right"
- }, 1000);
- $('#box1').show("slide", {
- direction: "left"
- }, 1000);
- });
- });
- </script>
- <style>
- #wrapper {
- position:relative;
- }
- #wrapper div {
- position:absolute;
- top:0;
- }
- </style>
- <h1>TiTle</h1>
- <div id="wrapper">
- <div id="box1" class="slidingDiv"> <a href="#" id="click1">Click to show other div</a>
- <br/>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.</div>
- <div id="box2" class="slidingDiv" style="display:none"> <a href="#" id="click2">Click to show other div</a>
- <br/>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.<br>More Line!</div>
- </div>
<script src="js/jquery.min.js" language="javascript" type='text/javascript'></script>
<script src="js/jquery-ui.js" language="javascript" type='text/javascript'></script>
<script>
$(document).ready(function () {
var maxHeight = 0;
$('.slidingDiv').each(function() {
if($(this).height() > maxHeight) maxHeight = $(this).height();
});
$('#wrapper').height(maxHeight);
$('#click1').click(function () {
$('#box1').hide("slide", {
direction: "left"
}, 1000);
$('#box2').show("slide", {
direction: "right"
}, 1000);
});
$('#click2').click(function () {
$('#box2').hide("slide", {
direction: "right"
}, 1000);
$('#box1').show("slide", {
direction: "left"
}, 1000);
});
});
</script>
<style>
#wrapper {
position:relative;
}
#wrapper div {
position:absolute;
top:0;
}
</style>
<h1>TiTle</h1>
<div id="wrapper">
<div id="box1" class="slidingDiv"> <a href="#" id="click1">Click to show other div</a>
<br/>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.</div>
<div id="box2" class="slidingDiv" style="display:none"> <a href="#" id="click2">Click to show other div</a>
<br/>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.<br>More Line!</div>
</div>
0 Comment(s)