0

YouTubeチュートリアルからサイトを作成しました。これが私のテストサイトです。そして 、これが役立つ場合のチュートリアル（3の最終ステップ）です。CSSはまだ使用されていません。

メニューのリンクをクリックすると。すべてが想定どおりに消えます。ただし、フェードアニメーションの最後に、前のページがちらつきます。

私
はJavaScriptをまったく使用していません。

index.php：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SuperFresh</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<a class="menu_top" href="pages/home.php">Home</a> /
<a class="menu_top" href="pages/portfolio.php">Portfolio</a> /
<a class="menu_top" href="pages/contact.php">Contact</a> /

<div id="content_area"></div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
</html>

nav.js：

$(document).ready(function () {
    $('#content_area').load($('.menu_top:first').attr('href'));
});

$('.menu_top').click(function () {
    var href=$(this).attr('href');
    $('#content_area').hide('slow').load(href).fadeIn('slow');

    return false;
});
4

3 に答える 3

1

交換：

var href=$(this).attr('href');    
$('#content_area').hide('slow').load(href).fadeIn('slow');

と：

$('#content_area').hide('slow', function(){
    $(this).load($(this).attr('href')).fadeIn('slow');
});

これにより、フェードアウトし、アニメーションが完了するまで待ってから、その関数を呼び出して新しいコンテンツを読み込みます。

詳細については、ドキュメントを確認してください。

于 2013-01-18T09:59:51.167 に答える
0

これを試すことができます：

$('.menu_top').click(function () {
    var href=$(this).attr('href');
    var page = $('<div/>').attr('id','page').load(href);
    $('#content_area').fadeOut('slow').html('').html(page).fadeIn('slow');

    return false;
});
于 2013-01-18T10:08:45.317 に答える
0

独自の関数でハンドラーを使用できます...

例：

$('#show').click(function() {
    $('#myDiv').show(0, onDivShow);
});

$('#hide').click(function() {
    $('#myDiv').hide(0, onDivHide);
});


function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }
于 2013-01-18T10:21:42.047 に答える