0
私はウェブサイトを作って、自分のコンテンツに単純にフェードイン/フェードアウトを加えたいと思っていました。しかし、ページ間で変更しようとするたびに、私はこの奇妙な白が "点滅"しますが、時には完璧に動作することもありますが、大部分は点滅します。 ご協力いただきありがとうございます。CSSフェードインでフェードアウトすると奇妙な瞬きをします
<script>
$(document).ready(function() {
$("#content").css("display", "none");
$("#content").fadeIn(1000);
$("a").click(function(event) {
event.preventDefault();
linkLocation = this.href;
$("#content").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
私はここに多くのコードが、が重要な部分であることを持っている可能性があるので、私のHTMLは、私は元のコードからいくつかのことを削除しましたされています
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Projekt 4</title>
<link rel="stylesheet" href="assets/reset.css">
<link rel="stylesheet" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h2 id="rubrik">Välkommen</h2>
<p id="text">Du befinner dig nu på min förstasida i min hemsida. För
att ta dig vidare och hitta så välj bland valen i navigeringen.
<br> Har du några frågor eller kommentarer kan du nå mig genom fältet
här till höger.</p>
<script>
$(document).ready(function() {
$("#content").css("display", "none");
$("#content").fadeIn(1000);
$("a").click(function(event) {
event.preventDefault();
linkLocation = this.href;
$("#content").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
</div>
</div>
</body>
</html>
あなたのhtmlを追加してください –
DomがロードされたときにjQueryで 'display：none'を追加していると思います。私はJSでスタイルを追加するのではなく、これをCSSプロパティとして追加します。 –
彼は最初の行 '$（"＃content "）にあります。css（" display "、" none "）;'、@BrandonMowat –