1
我试图创建幻灯片过渡效果,如发布在视频http://www.youtube.com/watch?v=SZTiJmclaRc中的幻灯片过渡效果。创建左/右过渡效果
当按钮被点击时,当前div#1将向左滑动并隐藏自己,而另一个div#2将从右侧滑动并移动到前一个滑出div的位置。
当按钮被再次触发时,div#2将向右滑动,而先前隐藏的div#1将从左侧滑出。
我一直在尝试修改http://jsfiddle.net/qSvDz/的代码如下,但我似乎无法得到我想要的结果。
任何人都可以请分享我一些想法如何做到这一点。
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();
});
感谢 消防
感谢很多人。你救了我整天寻找解决方案。你是那个人。又thx。 – Fire 2011-06-06 16:33:14