I am trying to create a slide transition effect like the one posted in the video http://www.youtube.com/watch?v=SZTiJmclaRc.
When the button is clicked the current div#1 will be sliding out to the 开发者_运维技巧left and hide itself while another div#2 will be sliding from the right and move to the location of of the previous slided out div.
And when the button is trigger again the div#2 will be sliding out to right while the previously hide div#1 will be sliding out from left.
I have been trying to modify the code at http://jsfiddle.net/qSvDz/ as below but I can't seem to get the result I wanted.
Could anyone pls share me some thought on how to do it.
function toggleDivs() {
var $home = $("#home");
var $memberHome = $("#member-home");
var $slideOut, $slideIn;
// See which <divs> should be animated in/out.
if ($home.position().left < 0) {
$slideIn = $home;
$slideOut = $memberHome;
}
else {
$slideIn = $memberHome;
$slideOut = $home;
}
$slideOut.animate({
left: "-" + $slideOut.width() + "px"
}, function() {
$slideIn.animate({ left: "0px" });
});
}
$("button").bind("click", function() {
toggleDivs();
});
Thanks Fire
Something like this?
http://jsfiddle.net/k_rma/VmSX4/
HTML:
<div id="container">
<div id="inner">
<div id="home">
<button>Click</button>
</div>
<div id="member-home">
<button>Click</button>
</div>
</div>
</div>
JS/JQUERY:
function toggleDivs() {
var $inner = $("#inner");
// See which <divs> should be animated in/out.
if ($inner.position().left == 0) {
$inner.animate({
left: "-400px"
});
}
else {
$inner.animate({
left: "0px"
});
}
}
$("button").bind("click", function() {
toggleDivs();
});
CSS:
#container {
position:relative;
border: 1px solid black;
width:400px;
height:600px;
overflow:hidden
}
#inner {
position: relative;
width: 800px;
}
#home {
position:absolute;
width: 400px;
height: 600px;
background-color: red;
}
#member-home {
position:absolute;
left:400px;
width: 400px;
height: 600px;
background-color: green;
}
精彩评论