jQuery的滑出菜单项 [英] Jquery slide out menu items

问题描述

我已经搜查，搜查的选项就一个jQuery去和我似乎无法找到任何马赫我想要的东西，但它似乎像这样一个简单的效果。谁能告诉我我怎么能有图像下方滑出喜欢的第二个项目，当有人悬停在菜单中的项目？

I have searched and searched for options as far a Jquery goes and I can not seem to find anything to mach what I want, yet it seems like such a simple effect. Can anyone tell me how I can have the menu items in the image below slide out like the second item when someone hovers over it?

推荐答案

您可以使用此多个CSS动画的方法。

You can use multiple css animate method for this.

这里是你的问题的答案的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做到这一点：

You can do this with just using 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; } ​

这篇关于jQuery的滑出菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！