Question

At the following fiddle I’ve implemented two modals that act like a wizard:

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

http://jsfiddle.net/nV8XZ/show

http://jsfiddle.net/nV8XZ/

Instead of switching between the modals (show/hide), I need to animate the first modal aside until disappearing, revealing the second modal.

Edit:

I’ve managed to implement the sliding, but it works as expected only for the first run. Consecutive runs doesn’t slide but toggle (until page refreshing)

See:
http://jsfiddle.net/nV8XZ/22

Edit2:

Thanks ridecar2 for the help,

And here is a enhanced working version:

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

Answer 1

In your later jsFiddle you need to do:

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

$('#secondmodal').width('1px'); is the important line as it sets the width of the second modal area back to 1px each time you use it.