2

リンクをクリックした後、1つのdivをslideUpし、別のdivをslideDownしてから、次のページに移動します。
問題: アニメーションが終了する前に新しいページが読み込まれます。
質問: どうすればこれを行うことができますか?
preventDefault を使用してから、何らかの方法で再開する必要がありますか?

これは URL です: http://www.jolandaschouten.nl/wordpress

これは、最初のメニュー項目に対してのみ実装されたコードです。

jQuery(document).ready(function($){

    var allDivs = $("#introductie").add("#agenda").add("#werk").add("#onderwijs-organisatie").add("#publicaties").add("#links").add("#contact");

    console.log(allDivs);

    $("li.page-item-11 a").click(slideUp);

    function slideUp(){
        allDivs.slideUp(500, slideDown);        
    }
    function slideDown(){            
        $("#introductie").slideDown(500);
    }
});

ps: SEO とブラウザーのナビゲーションの問題のため、AJAX を使用したくありません。クリックすると、実際には次のページに移動する必要があります。

4

4 に答える 4

5

デフォルトのアクション（リンクをたどる）を防ぐために戻りfalse、クロージャを使用してクリックされたアイテムをラッチし、手動でそれをたどります。

$("li.page-item-11 a").click(function(){
    var clickedAnchor = this;
    allDivs.slideUp(500, function(){
        $("#introductie").slideDown(500,function(){
            location.href = clickedAnchor.href;
        });
    });
    return false;
});

（最初のコールバックは、実際にはそのようなインライン関数リテラルである必要はありませんが、他のコールバックはclickedAnchor値を閉じるために必要です。）

于 2010-11-18T14:11:07.723 に答える
1

できることの 1 つは、アニメーション プロセス全体を.animate()でラップし、コールバックを使用して新しいページに移動することです。.animate() の下のコールバックは、アニメーションが完了すると発生します。これにより、探している動作が得られるはずです。

于 2010-11-18T14:06:45.367 に答える
0

インラインコメントを確認してください。初期選択を簡略化しました。新しいページをロードするには、slideDownコールバックを使用します。

function slideUp(){
    allDivs.slideUp(500, slideDown);
}
function slideDown(){
    $("#introductie").slideDown(500, function() {
        /* load the new page here */
    });
}
$(function() {
    //you can select multiple elements like this
    var allDivs = $("#introductie, #agenda, #werk, #onderwijs-organisatie, #publicaties, #links, #contact");
    console.log(allDivs);
    $("li.page-item-11 a").click(slideUp);
});
于 2010-11-18T14:10:16.823 に答える
0

助けてくれてありがとう！

新しいページがまだロードされていないときにスライドダウンするものがあまりないため、コードを正しく理解するのにしばらく時間がかかりました (一種の...)。そのため、slideDown コールバックを使用できませんでした。

私は今、次のような一時的な解決策を持っています: if ステートメントを使用して現在のページを特定し、アニメーションの後半部分であるスライド ダウン部分を実行します。アニメーションの最初の部分、slideUp-part では、コールバックとして「location.href」を使用し、Phrogz が示したように「return false」を使用します。

このような：

menuLinks.click(function() 
{
var clickedAnchor = this;

            allDivs.slideUp(750);
            mainDiv.fadeOut(500, function() 
            {
                location.href = clickedAnchor.href;
            }); 
return false;    
});

そして、ページがリロードされた後 (さらに、各ページに 1 つずつ、この後にいくつかの if ステートメントが続きます):

if (currentLocation.substr(0,52) == introductiePage) 
    {       
        introductieMenu.css({color:"#FF844A"});
        introductieDiv.hide();
        mainDiv.hide(function()
        {
            mainDiv.fadeIn(750);        
            introductieDiv.slideDown(750);
        });         
    }

あるページから別のページへの移動と、あるサブページから別のサブページへの移動、ページからサブページへの移動などの違いを実装する方法を見つけなければならないため、今は行き詰まっています。別スレになります。

于 2010-11-24T16:33:22.757 に答える