javascript - 幻灯片切换问题

Question

对不起我的疯狂问题。我有一些导航链接。通过将鼠标悬停在链接上，黑色背景从上到下滑动，链接从下到上移动。我找到了两个脚本。它运作良好。但我想结合两个动画。请查看我的小提琴位置。有任何想法吗？？

http://jsfiddle.net/DpZJE/

Answer 1

结合？像这样？

小提琴

您可以使用hover方法，它是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");
});

Answer 2

为更好地摆弄而编辑；）

还是像这样？
http://jsfiddle.net/neuroflux/DpZJE/9/
（带stop()动画）
http://jsfiddle.net/neuroflux/DpZJE/13/

片段（注意缺少hover()）：

$("li").on('mouseover', function () {
  $(this).children('span').slideToggle("slow");
  $(this).children('a').animate({"paddingTop": "-=30px"}, "slow");
}).on('mouseout', function() {
     $(this).children('span').slideToggle("slow");
     $(this).children('a').animate({"paddingTop": "+=30px"}, "slow");
});

Answer 3

我想你是这个意思？不使用slideToggle，而是使用slideDown 和slideUp

  $("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");
   });

（为调试添加了黄色背景..）
http://jsfiddle.net/avipinto/DpZJE/10/