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

EDIT2：

感谢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')
    })
})

DEMO

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。

如何滑动一个模态 - 揭示其他模态（像...一样的向导）

2 个答案: