javascript - 页面加载时淡化内容

Question

我有一个页面样式的网站。我的菜单：

<ul id="creamenu" class="menuHolder">
  <li><a id="menu1" href="#/1">1</a></li>
  <li><a id="menu2" href="#/2">2</a></li>
  <li><a id="menu3" href="#/3">3</a></li>
  <li><a id="menu4" href="#/4">4</a></li>
  <li><a id="menu5" href="#/5">5</a></li>
</ul>

单击 menu1 时，转到同一页面上的内容。我的内容结构：

<div id='menu1' class="fancyscroll-section" style="left:10800px;">
<div class="fancyscroll-content row blue">
/* Content items */         
</div>
</div>

我想要在获取内容页面时，通过淡入淡出效果加载内容。是否可以？

Answer 1

您可以使用fadeIn()来完成您的第一个菜单项和您想要与之关联的div 具有相同的ID。你should have unique ids为 html 元素。hide如果元素在您调用fadeIn 之前已经可见。

现场演示

$('#menu1').click(function() {
    $('#menu1_content').hide().fadeIn(2000);
});​