Question

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

Answer 1

联合？像这样？

Fiddle

您可以使用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

为更好的FIDDLING编辑;）

或者像这样？ 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，而是使用the 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/

幻灯片切换问题

3 个答案:

Fiddle