fadeOut текущий контент и fadeIn новое содержимое jquery

Я пытаюсь создать боковое меню, чтобы при щелчке пользователем ссылки на текущий контент в div (в середине страницы) должно было fadeout, а новое содержимое страницы должно было fadeIn, и я создал этот метод:fadeOut текущий контент и fadeIn новое содержимое jquery

<script type="text/javascript"> 
    $('a').click(function() { 
     $('#content').html('<img src="ajax-loader.gif" width="100" alt="loading">').show(); 
     var page = $(this).attr('href'); 
     $('#content').hide().load(page).fadeIn('slow'); 
     return false; 
    }); 
</script>

Однако, эффект не так, как ожидается, кто-нибудь знает, как улучшить этот метод? Я ожидал, что fadeout текущий контент на страницу фона и fadeIn новый контент.
Но текущее содержимое просто исчезает

Мой HTML-код:

<body> 
    <h1><img src="images/cooltext679404844.png"/></h1> 
    <ul id="nav" class="mmenu" type="none"> 
     <li><a href="contact.php"> Contact </a></li> 
     <li><a href="register.php"> Register </a></li> 
     <li><a href="login.php"> Login</a></li> 
     <li><a href="upload.php"> Submit paper </a></li> 
     <li><a href="tabs.php"> tabs menu test </a></li> 
     <li><a href="time-frame.php">profile</a></li> 
     <li><a href="status-reviews.php">check status of reviews</a></li> 
    </ul> 
    <p style="font-size: small;text-align: center;bottom: 0px;left: 300px; line-height: 0%;position:fixed; background-color: #cc8800"> 
     <a target="content" href="about.php">About us</a> | <a target="content" href="terms.php">Terms of service</a> | <a target="content" href="policy.php">Privacy Policy</a> 
    </p> 
    <div id="content"></div> 
</body>

источник

2012-04-24 Samer El Gendy

Я думаю, это потому, что вы заковав 'load' и' методы fadeIn'. «Загрузка» работает асинхронно – pomeh

Try:


$("#content").fadeOut('slow', function(){ 
    $("#content").load(page, function() { 
      $(this).fadeIn('slow'); 
    }); 
});

источник

2012-04-24 09:04:55

Используйте обратный вызов в вашей нагрузке. В противном случае она выцветает мгновенно:

var content = $('#content'); 
content.fadeOut().load(page, function() { 
    content.fadeIn(); 
});

источник

2012-04-24 09:02:17 binarious

fadeOut текущий контент и fadeIn новое содержимое jquery

ответ

Смежные вопросы