javascript - Jquery スライド アウト メニュー項目

Question

私はJqueryが行く限りオプションを検索して検索しましたが、私が望むものに一致するものを見つけることができないようですが、それはそのような単純な効果のようです. 下の画像のメニュー項目を、誰かがその上に置いたときに 2 番目の項目のようにスライドさせる方法を誰か教えてもらえますか?

Answer 1

これには、複数のcssanimateメソッドを使用できます。

これがあなたの質問のjQueryの答えです。

jQuery：

$('div').bind({
  mouseenter: function() {
    $(this).stop().animate({'background-position-y':'-20px','height':'68px'},600);
  },
  mouseleave: function() {
    $(this).stop().animate({'background-position-y':'-58px','height':'30px'},600);
  }
});​

css：

div {
   background: url(http://i.stack.imgur.com/g3aqx.jpg) -146px -58px;
   float:left; width:86px; height:30px;
}  ​

----------------------------------

または

これは、CSS3を使用するだけで実行できます。

CSS3はここでjsFiddleの例をアニメーション化します。

div {
    float:left; background: url(http://i.stack.imgur.com/g3aqx.jpg) -146px -58px;
    width:86px; height:30px;

transition: .5s;
-moz-transition:  .5s; /* Firefox 4 */
-webkit-transition:  .5s; /* Safari and Chrome */
-o-transition: .5s; /* Opera */
}

div:hover { background-position-y:-20px; height:68px; } ​

Answer 2

$('.menuClass').mouseover(function(){
    $(this).animate({'marginTop':'100px'});
});

$('.menuClass').mouseout(function(){
    $(this).animate({'marginTop':'0px'});
});

それに応じて marginTop の値を変更します。

これらも役立ちます：

http://api.jquery.com/mouseover/

http://api.jquery.com/mouseout/

http://api.jquery.com/animate/

Answer 3

animate jquery メソッドを使用できます。

http://jsfiddle.net/wWhG2/42/

$("#img").hover(function() {
    $(this).stop();
    $(this).animate({top:"0"},500,null); 
}, function () {
    $(this).stop();
    $(this).animate({top:"-150"},500,null);  
});