如何绕过javascript超时0

Question

这是一个小提琴：http://jsfiddle.net/hB7gY/16/

我有以下代码控制带有四个象限的幻灯片。我们的想法是通过幻灯片旋转并根据预定义的时间框架动态更改幻灯片。例如，很多时候幻灯片的值为0，这意味着立即加载系列中的下一张幻灯片。

问题在于，当使用fadeIn（）或animate（）时，它们需要比超时0更长的时间。我尝试在发生这种情况时递增计数器，但这不起作用。

编辑：我想我可能不清楚我的问题，但目标是能够立即加载下一个图像，但仍然保持前一个图像的动画效果，所以基本上它看起来好像两个图像同时动画。

var slide_array = <?php echo json_encode( $slides ); ?>;

jQuery(document).ready(function(){
        var c =0;
        var slide = 0;
        var counter = 1000;

            for (var i=0;i<slide_array.length;i++){
                jQuery('#slide_'+i).attr('src', slide_array[i]["url"]);
            }

        var intFn = function(){ 
            clearTimeout(interval);
            c++;
                    slide++;

                    if (slide == slide_array.length) { slide = 0; }

                    if (c == 4){ c = 0; }

                        jQuery('#slide_'+c).attr('src',slide_array[slide]['url']).animate({
                             opacity: 0.5
                         }, 100, function() {
                             jQuery('#slide_'+c).attr('src',slide_array[slide]['url']).animate({
                                opacity: 1
                            }, 100);
                         });

                    counter = slide_array[slide]['duration'] * 1000;

           //if (counter < 1000 ) { counter = 400; }
            interval = setTimeout(intFn, counter);
        }

        var interval = setTimeout(intFn, 2500);
        });