Javascript 滑动切换问题

对不起，我提出了一个疯狂的问题。我有一些导航链接。鼠标悬停在链接上，黑色背景从上到下滑动，链接从下到上移动。我找到了两个脚本。它工作得很好。但我想结合这两种动画。请查看我的小提琴位置。有什么想法吗

联合收割机？像这样

您可以使用mouseenter和mouseleave的组合方法

$("li.first a.link").hover(function(){
    $("li.first a.link").animate({"paddingTop": "-=30px"}, "slow");
}, function(){
    $("li.first a.link").animate({"paddingTop": "+=30px"}, "slow");
});

为了更好的摆弄而编辑； 还是像这样？ 停止动画

代码段注意到缺少悬停：

我想你是这个意思吧？ 不使用滑块切换，而是使用W滑块向下和滑块向上

  $("li.first").hover(function () {
     $(".trans1").slideUp("slow");
     $("li.first a.link").animate({"paddingTop": "-=30px"}, "slow");
   },function () {
     $(".trans1").slideDown("slow");
     $("li.first a.link").animate({"paddingTop": "+=30px"}, "slow");
   });

为调试添加了黄色背景。。

---

喜欢悬停功能-但仍然更喜欢继续@神经Fluxation好吧，我还是会说悬停比开启更复杂；当我连续快速地执行鼠标输入和鼠标输出时，如何停止动画。我已经试过停止，但不起作用？那是因为滑动切换。。。等等…编辑过的答案-第二把小提琴！真正地接受了这个。。。。？上帝啊

  $("li.first").hover(function () {
     $(".trans1").slideUp("slow");
     $("li.first a.link").animate({"paddingTop": "-=30px"}, "slow");
   },function () {
     $(".trans1").slideDown("slow");
     $("li.first a.link").animate({"paddingTop": "+=30px"}, "slow");
   });