Question

以下是我的网页的HTML：

<div id="container">

       <div id="lineandbutton">
                         <div class="verticalline" style="display:none;"></div>
                   <div id="iwanimate" style="display:none;">
                         <div id="iwabutton">
                            <img src="siteimages/iwabutton.png" height="110px" width="110px">
                         </div>
                   </div>
       </div>
       <div id="titlesonly">
                       <div class="leftcontainer">
                                <div class="projects" style="display:none;">
                                <p id="projectstext"> <h2><a href="commercial/index.html" class="transition">PROJECTS</a></h2> </p>
                                </div>
                       </div>       
                       <div class="rightcontainer">
                                <div class="company"style="display:none;">
                                <p id="projectstext"> <h2><a href="thecompany.html" class="transition">COMPANY</a></h2> </p>
                                </div>
                       </div>
           </div>

现在，首先我想滑动垂直线并淡化iwabutton，然后点击iwabutton以显示项目和公司标题。通过在head部分输入以下代码，我正确地得到了这个效果：

<script>
$(document).ready(function () {
    $(".verticalline").slideDown("slow", "linear", function () {
        $("#iwanimate").fadeIn(2000);
    });
    $("#iwabutton").click(function () {
        $(".projects").fadeIn(2500);
        $(".company").fadeIn(2500);
    });
});
</script>

现在，我想要点击其中一个项目和公司标题时淡出，垂直线和iwabutton向左移动289px，iwabutton应该下降100px并缩小到55px并且相应的链接应该打开当前页面淡出，下一页慢慢淡入。

我编写的代码如下：

<script type="text/javascript">
                                $(document).ready(function() {
                                    $("a.transition").click(function(event){
                                        event.preventDefault();
                                        $("#titlesonly").fadeOut("slow",function(){$("#lineandbutton").animate({right:'289px',"slow",function(){$(#iwabutton").animate({bottom: '-=100px'}, "slow",function(){("#iwanimate").animate({height:'55px',width:'55px'});
                                        linkLocation = this.href;
                                        $("body").fadeout("slow",redirectPage);
                                        });
                                        function redirectPage() {
                                        window.location = linkLocation;
                                        }

                                       });
                                </script>

我的第一个效果是正确的，但第二个效果似乎没有成功。有人可以帮帮我吗？我将非常感激。

这段代码正确获取了页面过渡效果，但我无法移动verticalline和iwabutton。

<script type="text/javascript">
                                $(document).ready(function() {
                                    $("body").css("display", "none");

                                    $("body").fadeIn("slow");

                                    $("a.transition").click(function(event){
                                        event.preventDefault();
                                        linkLocation = this.href;
                                        $("body").fadeOut(1000, redirectPage);      
                                    });

                                    function redirectPage() {
                                        window.location = linkLocation;
                                    }
                                });
                                </script>

Answer 1

将怪物线整理成.promise().then().then()...形式，我得到：

$(document).ready(function() {
    $("a.transition").click(function(event){
        event.preventDefault();
        $("#titlesonly").fadeOut("slow").promise(function() {
            return $("#lineandbutton").animate({right:'289px'}, "slow").promise();
        }).then(function() {
            return $("#iwabutton").animate({bottom: '-=100px'}, "slow").promise();
        }).then(function() {
            return $("#iwanimate").animate({height:'55px', width:'55px'}).promise();
        });
        var linkLocation = this.href;
        $("body").fadeOut("slow", function() {
            window.location = linkLocation;
        });
    });
});

您现在已经拥有可管理的链，这可以避免使用pyramid of doom。

但是，我希望你想要：

$(document).ready(function() {
    $("a.transition").click(function(event) {
        event.preventDefault();
        var linkLocation = this.href;
        $("#titlesonly").fadeOut("slow").promise(function() {
            return $("#lineandbutton").animate({right:'289px'}, "slow").promise();
        }).then(function() {
            return $("#iwabutton").animate({bottom: '-=100px'}, "slow").promise();
        }).then(function() {
            return $("#iwanimate").animate({height:'55px', width:'55px'}).promise();
        }).then(function() {
            return $("body").fadeOut("slow").promise();
        }).then(function() {
            window.location = linkLocation;
        });
    });
});

它是否有效是另一回事。这取决于你的HTML / CSS的构建情况。

我想在我的网页中添加某些效果，因此我无法正确使用我的代码

1 个答案: