我尽量不在 StackExchange 上发布很多问题,除非我似乎找不到解决方案。我仍在学习 jQuery,并且在为左侧菜单滑动面板设置动画时遇到问题。
滑动面板的目的是为用户提供从数据库中提取的信息和链接。我正在尝试研究如何为一个面板设置动画并制作动画(如果当前已经打开了一个)以制作动画。所以任何时候只能打开一个面板。
到目前为止,这是我的代码:
$(".editor_content").hide();
//Panel 1
$('#tab_editor').toggle(function(){
$('#panel_editor').animate({width:"400px", opacity:1.0}, 500, function() {
$('.editor_content').fadeIn('slow');
$('.wrapper').animate({"left": "190px"}, "slow");
});
},function(){
$('.editor_content').fadeOut('fast', function() {
$('#panel_editor').stop().animate({width:"0", opacity:0.0}, 200);
$('.wrapper').animate({"left": "0px"}, "slow");
});
});
//Panel 2
$('#tab_themer').toggle(function(){
$('#panel_themer').animate({width:"400px", opacity:1.0}, 500, function() {
$('.themer_content').fadeIn('slow');
$('.wrapper').animate({"left": "190px"}, "slow");
});
},function(){
$('.themer_content').fadeOut('fast', function() {
$('#panel_themer').stop().animate({width:"0", opacity:0.0}, 200);
$('.wrapper').animate({"left": "0px"}, "slow");
});
});
两个面板的 CSS 都设置为fixed top:0 left:0
.
使用上面的代码,面板将动画进出,但是当一个被点击并动画化时,我无法理解如何为当前打开的动画制作动画。
任何帮助或指导将不胜感激。
提前致谢。