jquery - ドキュメント準備完了時とリンク読み込み時の両方の Jquery アニメーション

Question

現在、ホバーで動作し、パネルを左右にスライドしてその下のコンテンツを表示するアニメーションがあります。私がやろうとしているのは、ホームページの最初の読み込み時にパネルを左右にスライドさせ、ユーザーが別のページへのリンクをクリックすると、パネルがページの中央に戻ってきて、一度データが読み込まれると、左右に移動して、その下のデータが再び表示されます。

すべてを機能させるために必要なものをどこに持っていくべきかわかりません。css のジェネリックでこれまでに得たものは次のとおりです。

    body {margin:0;padding:0;height:100%;width:100%;}
.overlay_container {height:100%;width:100%;overflow:hidden;}
    .box_container{  
position:relative; /* important */  
width:1280px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */  
height:953px; /* important */  
overflow:hidden; /* hide the content that goes out of the div */  
/*just styling bellow*/  
background: black;  
color:white;  
}  
.images_holder{  
position:absolute; /* this is important, so the div is positioned on top of the text */  
}  
.image_div {  
    position:relative; /* important so we can work with the left or right indent */  
    overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */  
    width:50%; /* make it 50% of the whole images_holder */  
    float:left; /* make then inline */  
}  
.right img{  
    margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */  
}  
.clear{  
    clear:both;  
}  

そしてjquery：

$(document).ready(function() {

    //when the user hovers over the div that contains our html...
    $('.box_container').hover(function(){
        //... we get the width of the div and split it by 2  ...
        var width = $(this).outerWidth() / 2;
        /*... and using that width we move the left "part" of the image to left and right "part"
        to right by changing it's indent from left side or right side... */
        $(this).find('.left').animate({ right : width },{queue:false,duration:500});
        $(this).find('.right').animate({ left : width },{queue:false,duration:500});
    }, function(){
        //... and when he hovers out we get the images back to their's starting position using the same function... '
        $(this).find('.left').animate({ right : 0 },{queue:false,duration:500});
        $(this).find('.right').animate({ left : 0 },{queue:false,duration:500});
        //... close it and that's it
    });

});

そしてhtml：

    <div class='box_container'>  

        <!--START THE IMAGE PARTS HOLDER-->  
        <div class='images_holder'>  

            <!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->  
            <div class='image_div left'><img class='box_image' src='1280overlay.jpg' style='width:1280px'/></div>  
            <div class='image_div right'><img class='box_image' src='1280overlay.jpg' style='width:1280px'/></div>  

            <!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->  
            <div class='clear'></div>  

        </div>  
        <!--END THE IMAGE PARTS HOLDER-->  

        <!--START THE TEXT-->  
        Just some dummy text.  
        <!--END THE TEXT-->  

</div>  

考え？