0

私のページの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>

ここで、最初に垂直線をスライドダウンして岩ボタンをフェードインし、岩ボタンをクリックしてプロジェクトと会社のタイトルを表示します。次のコードを 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>

最初の効果はうまくいきましたが、2 番目の効果がうまくいかないようです。誰でも私を助けてもらえますか？とても感謝しています。

このコードはページ遷移効果を正しく取得しますが、縦線と岩ボタンを移動できません。

<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 に答える