jquery - jQuery .html .animate

Question

我正在尝试构建一个只有两个步骤的步骤轮播。我想将图片加载到右侧 div 中，将其滑动到左侧，然后将相同的图片加载到左侧 div 中并再次使用 css 使其可见以恢复原始状态并准备以不同的方式重复该过程图片。

它有点工作。加载页面后，第一次点击一切正常。在第二次单击时，插入的图片仅在动画完成后加载。例如，即使动画时间设置为 20000。

所以这不是图像加载问题，而是代码的一些问题。.html 不能有回调函数 - 那么我该如何正确地做到这一点？

$(window).ready(function () {
    $('#unt').click(function () {
        $('#panorama2').html('<img src="img/panoramabild-1.jpg">');
        $('#panoramaslider').animate({
            'margin-left': '-1240px'
        }, 600, function () {
            $('#panorama').html('<img src="img/panoramabild-1.jpg">');
            $('#panoramaslider').css({
                'margin-left': '0'
            });
        });
    });
    $('#phi').click(function () {
        $('#panorama2').html('<img src="img/panoramabild-2.jpg">');
        $('#panoramaslider').animate({
            'margin-left': '-1240px'
        }, 600, function () {
            $('#panorama').html('<img src="img/panoramabild-2.jpg">');
            $('#panoramaslider').css({
                'margin-left': '0'
            });
        });
    });
});