私のサイトの任意のページに移動すると、Jquery を使用してテキストの不透明度を (0 から 1 に) アニメーション化しています。次に、メイン ナビゲーションのクリックで、テキストのアニメーションを初期化してフェードアウトさせ、次にリンクを初期化して次のページに移動します。ただし、何らかの理由で、テキストが完全にアニメーション化される前にメイン ナビゲーションをクリックすると、テキストはフェードアウトしますが、完全な不透明度でちらつき、次のページへのリンクが読み込まれます。誰かがこれを修正する方法を知っているかどうか疑問に思っていました.以下のコードを使用しています. どうにかしてキューを使用する必要があると考えていましたが、それが役立つかどうかはわかりません....ちらつきを見ることができる私のサイトへのリンクは次のとおりです-> www.originalengine.com/test/iindex.html
CSSで不透明度0から始めます
#AlternateContent{
position: relative;
opacity: 0;
}
次に、テキスト div をフェードインします
$('#AlternateContent').animate({opacity: '1'},{duration: 2650});
次に、どのナビゲーション ボタンが押されたかを確認し、フェードアウトをアニメーション化する方法を次に示します。
if (window.location.pathname === '/test/index.html')
{
$('#AboutButton').bind('click', AboutButton);
$('#PortfolioButton').bind('click', PortfolioButton);
$('#ContactButton').bind('click', ContactButton);
}
function ContactButton(e) {
$('#AlternateContent').animate({height: 0},{duration: 2650, queue: false}, 'swing')
.animate({opacity: '0'},{duration: 577, queue: false}, function(){
document.getElementById("AlternateContent").style.opacity=0;
window.location = 'contact.php';
});
}
私が言ったように、これは機能しますが、最後にフラッシュが発生します。私のサイト ( www.originalengine.com/test/iindex.html ) にアクセスして確認してください。ページ間でナビゲーション項目をすばやく押すと、フェードアウト中にテキストが再び「オン」に点滅してから次のページに移動します。 、完全にフェードアウトしたいだけです!!
前もって感謝します