jquery - Jquery .html .animate

Question

2 つのステップのみでステップ カルーセルを構築しようとしています。写真を右のdivにロードし、左にスライドさせてから、同じ写真を左のdivにロードし、cssで再度表示して元の状態に戻し、別のプロセスを繰り返す準備をしたい画像。

それはちょっとうまくいきます。ページを読み込んだ後、最初のクリックですべてがスムーズに機能します。2 回目のクリックでは、挿入された画像はアニメーションの完了後にのみ読み込まれます。たとえば、アニメーション時間が 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'
            });
        });
    });
});