jquery "animate" z-index not working?

Question

Lots of other questions, but none seemed to apply. I'm sure this is something simple, but this doesn't work like I'm expecting:

$('#conflictsPane').css('left','600px')
    .css('z-index', '1')
    .animate({ left: "750px" }, 'slow')
    .css('z-index', '101')
    .animate({ left: "720px" }, 'fast');

I'm expecting it to slide out from behind another element then slide back in over it a bit. It works really well except seems to completely ignore the first assigning of zindex. My other element is 100. As it is above, it starts on top and ends on top. If I change the 101 to a 99, it starts under and ends under. I'm assuming it's just not blocking like I'm expecting.

I tried adding a delay (and then a bunch of delays) but it had no effect.

Answer 1

This did the job:

$('#conflictsPane')
    .css('left', '600px')
    .css('z-index', 1)
    .animate({ left: "750px" }, 'slow', function () {
        $(this).css('z-index', 101)
    })
    .animate({ left: "720px" }, 'fast');