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个页面-带有动画的“初始页面”和复制了初始页面最终状态的“烫发”页面。然后使用本地存储，使用一些PHP代码来确保启动页面仅运行一次。

经过几次动画处理后，是否可以修复页面的最终外观？

1 个答案: