javascript - スライドトグルの問題

Question

クレイジーな質問でごめんなさい。私はいくつかのナビゲーションリンクを持っています。リンクの上にマウスを置くと、黒い背景が上から下にスライドし、リンクが下から上に移動します。2つのスクリプトが見つかりました。それはうまくいきます。しかし、私は両方のアニメーションを組み合わせたいと思います。私のフィドルの場所を見てください。何か案は？？

http://jsfiddle.net/DpZJE/

Answer 1

より良いフィドリングのために編集;)

またはこのように？
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 2

混ぜる？このような？

フィドル

mouseenter と mouseleave を組み合わせた hover メソッドを使用できます。

$("li.first a.link").hover(function(){
    $("li.first a.link").animate({"paddingTop": "-=30px"}, "slow");
}, function(){
    $("li.first a.link").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/