javascript - 如何将模态滑到一边 - 显示其他模态（如向导......）

Question

在下面的小提琴中，我实现了两个像向导一样的模式：

$('#jumptosecondmodal').click(function(e) {
    $('#secondmodal').modal('show');
    $('#firstmodal').modal('hide');
})

http://jsfiddle.net/nV8XZ/show

http://jsfiddle.net/nV8XZ/

我不需要在模态之间切换（显示/隐藏），而是需要将第一个模态放在一边，直到消失，从而显示第二个模态。

编辑：

我已经设法实现了滑动，但它只在第一次运行时按预期工作。连续运行不滑动而是切换（直到页面刷新）

见：http: //jsfiddle.net/nV8XZ/22

编辑2：

感谢ridecar2的帮助，

这是一个增强的工作版本：

http://jsfiddle.net/nV8XZ/27/show

Answer 1

您可以尝试fadeIn和fadeOut方法：

$('#jumptosecondmodal').click(function(e) {
    $('#firstmodal').fadeOut(400, function(){
        $(this).modal('hide')
        $('#secondmodal').fadeIn().modal('show')
    })
})

演示

Answer 2

在您以后的 jsFiddle 中，您需要执行以下操作：

$('#jumptosecondmodal').click(function(e) {
  $('#secondmodal').width('1px');
  $('#secondmodal').modal('show');
  $('#secondmodal').animate({width: 400}, 2500, function(){
    $('#firstmodal').modal('hide');
  })
})

$('#secondmodal').width('1px');是重要的一行，因为它每次使用时都会将第二个模态区域的宽度设置回 1px。