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

我试图让我的jQuery动画在旧版本的IE中正常工作，但由于某些原因，它会跳过第二个。当第一次尝试为每个div制作动画时，我猜这一定与我应用css和分配类的顺序有关，但我不知道如何修复它

基本上，我希望发生的是： 1.用户单击客户推荐信的名称/标签 2.当前证明将淡出不透明度：0 3.包含div的推荐信的高度将根据边栏菜单的高度或目标推荐信的高度（以较大者为准）进行调整 4.目标推荐会以不透明的方式淡出：1

我有一个在线演示页面

这是我的密码：

Javascript:： HTML:：

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');
    });
});

<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>