Question

HTML

<div id="two" />
<form >
<input type="text"/>
<input type="text"/>
<input type="button" id="twobtn" value="Pay" />
</form>
</div>

<div id="one" />
<form >
<input type="text"/>
<input type="text"/>
<input type="button" id="onebtn" value="Next"/>
</form>
</div>

上面的html有两个div，每个div都有一个表单。加载页面时，只显示div id =“one”。

填写“one”后，单击“下一步”，此表单将滑动并淡出，div id =“two”出现滑动。

我试过

<script type="text/javascript">
$(document).ready(function() {

$('#two').hide();

$('#onebtn').on('click',function(){
    $('#one').hide('slow')
    $('#two').show('slow');
});
});

</script>

并且这两个div是一个在另一个上面排列。可以从侧面滑动过渡吗？有关如何实现这一点的任何帮助吗？

我有一个小提琴正在工作http://jsfiddle.net/e6en9/但是当我在我的网站上尝试时，＃TWO在它加载时被隐藏。当我点击#ONEBTN它隐藏表格并显示#TWO那么#TWO被隐藏并返回到加载时如何。

有人可以用jquery帮我吗？这个更好的jquery？以及如何从侧面动画中添加幻灯片？我是jquery的新手，我已经阅读了jquery doc ..但是不能让它变得完美。请提供帮助

Answer 1

试试这个（DEMO）

$('#two').hide();
$('#onebtn').on('click',function(){
    $('#one').fadeOut('slow',function(){
        $('#two').fadeIn('slow');
    });
});

Answer 2

试试这个滑动效果：

$('#two').hide();
$('#onebtn').on('click',function(){
    $('#one').css({'position':'absolute', 'width':'380px'}).animate({"left":"100%"});
    $('#two').fadeIn('slow');
});

以下链接指向jsfiddle http://jsfiddle.net/e6en9/4/

的更新版本

编辑：也是为了回应Josh Powell发表的评论，div的开头标记不需要反斜杠。将您的开场div从更改为

通过慢速滑动到侧面动画来隐藏单击div

2 个答案: