Javascript 如何制作抖动动画

我正在创建一个黄色的悬停区域，当鼠标悬停在该区域时，事件：一个选项卡正好出现在该悬停区域中。但当我把鼠标放在那里时，标签开始出现并抖动 但我不知道如何消除抖动误差

这是我的密码

$（文档）.ready（函数（）{
$（'#demo'）.mouseleave（函数（事件）{
$（'.tab'）.stop（）.animate({
不透明度：“0.5”，
marginLeft:'190px'，
宽度：'0px'
}，600，函数（）{//动画完成
$（'演示'）.addClass（'悬停'）；
});
});
$（'#demo'）.mouseover（函数（事件）{
$（'.tab'）.stop（）.animate({
不透明度：“1”，
边缘左侧：“0px”，宽度：“190px”
}，300，函数（）{//动画完成
$（'演示'）.removeClass（'悬停'）；
});
});
});
#演示{
填充物：5px；
字号：18px；
文本对齐：居中；
背景色：#555；
颜色：白色；
边框：实心1px#666；
边界半径：3px；
位置：绝对位置；
左边距：10px；
宽度：190px；
身高：100%；
不透明度：0.5；
背景颜色：黄色；
}
#演示。悬停{
背景颜色：#000；
}
.标签{
左边距：190px；
宽度：0px；
身高：100%；
不透明度：0.5；
背景色：#876；
位置：绝对位置；
}

停在这里！
第一个面板
不是在
#demo
上触发
mouseleave
事件，而是在
选项卡
上触发
mouseleave
事件


$（文档）.ready（函数（）{
$（'.tab'）.mouseleave（函数（事件）{
$（'.tab'）.stop（）.animate({
不透明度：“0.5”，
marginLeft:'190px'，
宽度：“0px”
}，600，函数（）{//动画完成
$（'演示'）.addClass（'悬停'）；
});
});
$（'#demo'）.mouseover（函数（事件）{
$（'.tab'）.stop（）.animate({
不透明度：“1”，
marginLeft:'0px'，
宽度：“190px”
}，300，函数（）{//动画完成
$（'演示'）.removeClass（'悬停'）；
});
});
});
#演示{
填充物：5px；
字号：18px；
文本对齐：居中；
背景色：#555；
颜色：白色；
边框：实心1px#666；
边界半径：3px；
位置：绝对位置；
左边距：10px；
宽度：190px；
身高：100%；
不透明度：0.5；
背景颜色：黄色；
}
#演示。悬停{
背景颜色：#000；
}
.标签{
左边距：190px；
宽度：0px；
身高：100%；
不透明度：0.5；
背景色：#876；
位置：绝对位置；
}
`
停在这里！
第一个面板
不是在
#demo
上触发
mouseleave
事件，而是在
选项卡
上触发
mouseleave
事件


$（文档）.ready（函数（）{
$（'.tab'）.mouseleave（函数（事件）{
$（'.tab'）.stop（）.animate({
不透明度：“0.5”，
marginLeft:'190px'，
宽度：“0px”
}，600，函数（）{//动画完成
$（'演示'）.addClass（'悬停'）；
});
});
$（'#demo'）.mouseover（函数（事件）{
$（'.tab'）.stop（）.animate({
不透明度：“1”，
marginLeft:'0px'，
宽度：“190px”
}，300，函数（）{//动画完成
$（'演示'）.removeClass（'悬停'）；
});
});
});
#演示{
填充物：5px；
字号：18px；
文本对齐：居中；
背景色：#555；
颜色：白色；
边框：实心1px#666；
边界半径：3px；
位置：绝对位置；
左边距：10px；
宽度：190px；
身高：100%；
不透明度：0.5；
背景颜色：黄色；
}
#演示。悬停{
背景颜色：#000；
}
.标签{
左边距：190px；
宽度：0px；
身高：100%；
不透明度：0.5；
背景色：#876；
位置：绝对位置；
}
`
停在这里！
第一个面板
这是因为您仅在黄色矩形上触发悬停，当选项卡出现时，您停止在黄色矩形上悬停。在我的解决方案中，还需要在
.tab
上触发
mouseleave（）
事件


$（文档）.ready（函数（）{
$（'#demo'）.mouseleave（函数（事件）{
$（'.tab'）.mouseleave（函数（事件）{//添加此行
$（'.tab'）.stop（）.animate({
不透明度：“0.5”，
marginLeft:'190px'，
宽度：“0px”
}，600，函数（）{//动画完成
$（'演示'）.addClass（'悬停'）；
});
})；//添加这一行
});
$（'#demo'）.mouseover（函数（事件）{
$（'.tab'）.stop（）.animate({
不透明度：“1”，
marginLeft:'0px'，
宽度：“190px”
}，300，函数（）{//动画完成
$（'演示'）.removeClass（'悬停'）；
});
});
});
#演示{
填充物：5px；
字号：18px；
文本对齐：居中；
背景色：#555；
颜色：白色；
边框：实心1px#666；
边界半径：3px；
位置：绝对位置；
左边距：10px；
宽度：190px；
身高：100%；
不透明度：0.5；
背景颜色：黄色；
}
#演示。悬停{
背景颜色：#000；
}
.标签{
左边距：190px；
宽度：0px；
身高：100%；
不透明度：0.5；
背景色：#876；
位置：绝对位置；
}
`
停在这里！
第一个面板
这是因为您仅在黄色矩形上触发悬停，当选项卡出现时，您停止在黄色矩形上悬停。在我的解决方案中，还需要在
.tab
上触发
mouseleave（）
事件


$（文档）.ready（函数（）{
$（'#demo'）.mouseleave（函数（事件）{
$（'.tab'）.mouseleave（函数（事件）{//添加此行
$（'.tab'）.stop（）.animate({
不透明度：“0.5”，
marginLeft:'190px'，
宽度：“0px”
}，600，函数（）{//动画完成
$（'演示'）.addClass（'悬停'）；
});
})；//添加这一行
});
$（'#demo'）.mouseover（函数（事件）{
$（'.tab'）.stop（）.animate({
不透明度：“1”，
marginLeft:'0px'，
宽度：“190px”
}，300，函数（）{//动画完成
$（'演示'）.removeClass（'悬停'）；