使用Jquery

Question

我正在构建一个页面，左侧是侧边栏菜单，右侧是滚动内容。当用户点击菜单中的其中一个链接时，我希望相应的div在内容完成滚动后闪烁一次。

为实现这一目标，我写了这段代码：

$('a[href*=#]:not([href=#])').click(function() {
    var banner = $(this).attr('href') + '.overlay';
    setTimeout(function(){
        $(banner).animate({'opacity':'1'},50);
    }, 800);
    setTimeout(function(){
        $(banner).animate({'opacity':'0'},50);
    }, 850);
});

HTML：

<div class="banner" id="first">
    <div class="overlay"></div>
    </div>
</div>
<div class="banner" id="second">
    <div class="overlay"></div>
    </div>
</div>

<a href="#first">   
     <li>Antifouling</li>
</a>
<a href="#second">  
    <li>Strak in de was</li>
</a>

CSS

.banner {
float: left;
width: 100%;
height: auto;
background-color: #FFFFFF;
margin-bottom: 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
position:relative;
padding-bottom: 20px;
}
.overlay {
position: absolute;
top:0;left:0;right:0;bottom:0;
background-color: #FFFFFF;
opacity: 0;
z-index: 100;
}

点击#first时变量“banner”的输出将是＃first.overlay

现在事实证明我不能在变量上使用.animate。有没有办法解决这个问题，还是我需要寻找其他地方？