0

Here is the HTML for my page : 

<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>

Now , first I wanted to slidedown the verticalline and fadein the iwabutton, then click the iwabutton to reveal the Projects and Company titles. I got this effect correctly by putting in the following code into the head section :

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

Now, I want the Project and Company titles to fadeout when one of them is clicked and the vertical line and iwabutton to move 289px to the left, the iwabutton should then go down by 100px and scale down to 55px and the corresponding link should open with the current page fading out and next page fading in slowly.

I wrote the code as follows : 

<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>

I got my first effect right, but the second effect doesn't seem to work out. can anyone please help me out? I would be very much grateful.

This piece of code gets the page transition effect correctly but I am unable to move the verticalline and 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>
4

1 回答 1

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;
        });
    });
});

你现在有一个可管理的链条，它避免了厄运金字塔。

但是，我希望您想要：

$(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 的构建程度。

于 2013-06-28T10:06:55.783 回答