IE在第一次尝试时跳过animate（）不透明度

Question

我正在尝试让我的jQuery动画在旧版本的IE中正常工作但由于某种原因，它会在第一次尝试每个div时跳过第二个.animate（）过程。我猜它必须与我如何应用css和分配类的顺序有关，但我无法弄清楚如何解决它。

基本上我想要发生的是： 1.用户点击客户推荐的名称/标签 2.当前的见证淡出（不透明度：0） 3.包含div的推荐书的高度可调整为侧边栏菜单的高度或目标推荐的高度（以较大者为准） 4.目标推荐书淡入（不透明度：1）

我在线有一个演示页面here。

这是我的代码：

的Javascript ::

jQuery(document).ready(function($){
    var targetTestimonial = $('div.current');

    $('#testimonialMenu a').click(function(e){
        e.preventDefault(); // disable default link behavior (no page change)                   
        targetTestimonial = $('#' + $(this).attr('rel'));

        if (!targetTestimonial.hasClass('current')){
            var tempHeight = Math.max($('#testimonialMenuMask').outerHeight(), $(targetTestimonial).outerHeight());

            $('div.current').animate({opacity:0}, 500, function(){
                $('#testimonialContainer').animate({height: tempHeight}, 500, function(){
                    $('div.current').removeClass('current').css({display:'none'});
                    $(targetTestimonial).css({display:'block'}).animate({opacity:1.0}, 500, function(){
                        $(this).addClass('current');
                    });
                });
            });
        }

        $('#testimonialMenu a').removeClass('current');
        $(this).addClass('current');
    });
});

HTML ::

<div id="testimonialMenuMask">
    <h3>Select a Testimonial:</h3>
    <ul id="testimonialMenu">
        <li>
            <ul>
                <li><a href="#" rel="marianne" class="current">Marianne</a></li>
                <li><a href="#" rel="dillon">Dillon</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="testimonialContainer">
    <div id="marianne" class="testimonialMask current">
        <!-- HTML CONTENT -- >
    </div><div id="dillon" class="testimonialMask">
        <!-- HTML CONTENT -- >
    </div>
</div>