在几个动画之后，是否可以修复页面的最终外观

Question

这可能是一个充满困难的问题，但是我刚刚开始学习jQuery（也是JS初学者） - 所以我不知道我不知道什么。（因此，所有的建设性建议都欢迎！）

我构建了我的第一个jQuery动画 - 在https://ss.smile-nz.com/~qenew1/test2.php。我顺序显示代表产品线的3张图像，收缩并将其移至页面上的一行。

我真的希望放置状态（连续的3个缩小图像等）成为默认状态，因此，如果用户移至网站中的另一页，然后返回此页面，则是动画不重播。

不使用cookie。

我曾经想过将这种终端状态构建为开始状态，但隐藏了 - 然后运行动画以最终以该状态...但是这似乎有很多工作，所以有更好的方法吗？

html

    <div id="outer-box">
    <div class="myContent">
        <div id="hdr">#HMAINS#</div>
        <script> /***  remove 'logo' text from menu **/
            document.getElementById('hdr').getElementsByTagName('td')[4].innerHTML = "";
        </script>
        <div class="box">#CONTENT#</div>
    </div>
    <div class="showImg image1">
        <h4>Aquaculture</h4>
        <img id="startNow" src="images/oceanforest3.jpg">
    </div>
    <div class="showImg image2">
        <h4>Fishing</h4>
        <img src="images/Pearl-in-shell_square3.jpg">
    </div>
    <div class="showImg image3">
        <h4>Industrial</h4>
        <img src="images/temp.jpg">
    </div>
</div>

jQuery

    $("#startNow").load(function () {
    $(".image1 img").delay(500).animate({opacity: op},{duration: d});
    $(".image1").delay(500).animate( {left: '100px', top: t, height: h, width: w},
        {duration: d, complete: function () {
            $(".image1 h4").css({ "visibility": "visible"});
            $(".image2 img").animate({ opacity: op }, { duration: d });
            $(".image2").animate( {left: '450px', top: t, height: h, width: w},
                {duration: d, complete: function () {
                    $(".image1 h4").css({ "color": "#000000" });
                    $(".image2 h4").css({ "visibility": "visible" });
                    $(".image3 img").animate({ opacity: op }, { duration: d });
                    $(".image3").animate( {left: '800px', top: t, height: h, width: w},
                            { duration: d, complete: function () {
                                $(".image2 h4").css({ "color": "#000000" }); 
                                $(".image3 h4").css({ "visibility": "visible", "color": "#000000" }); 
                            }}                                      
                    );
                }}
            );
        }}
    );
});

Answer 1

这看起来太难了，所以我通过拥有2页 - 带有动画的'plaplash page'和一个复制了plash的最终状态的'perm'页面页。然后使用本地存储。