26.项目 1-博客前端：封装库--增强弹窗菜单

学习要点：

1.问题所在
2.设置代码

在弹出菜单的时候，我们希望遮罩是是通过透明度渐变而来，关闭的时候也是渐变。而
菜单，就采用向下滚动的方式进行。

一．问题所在

略。

二．设置代码

//打开遮罩，并且设置动画
screen.lock().animate({
attr : 'o',
target : 30,
t : 30,
step : 10
});

//先设置动画后，再关闭遮罩
screen.animate({
attr : 'o',
target : 0,
t : 30,
step : 10,
fn : function () {
screen.unlock();
}
});
//一个动画结束后，再执行一段代码
if (obj.fn != undefined) obj.fn();
//下拉菜单效果
$('#header .member').hover(function () {
$(this).css('background', 'url(images/arrow2.png) no-repeat 55px center');
$('#header .member_ul').show().animate({
attr : 'o',
target : 100
});
}, function () {
$(this).css('background', 'url(images/arrow.png) no-repeat 55px center');
$('#header .member_ul').animate({
attr : 'o',
target : 0,
fn : function () {
$('#header .member_ul').hide();
}
});
});

PS：对于多个动画冲突导致终止问题，是因为只采用了一个定时器，我们可以对每个
动画分配一个定时器即可解决。

感谢收看本次教程！