在页面加载时淡化内容

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。你是h should have unique ids的html元素。如果在调用fadeIn之前元素已经可见hide。

<强> Live Demo

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