CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
user1548964
user1548964

Reputation: 11

Jquery slide out menu items

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?

Example Effect

Upvotes: 1

Views: 842

Answers (3)

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

You can use multiple css animate method for this.

Here is your question's jQuery answer.

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(https://i.sstatic.net/g3aqx.jpg) -146px -58px;
   float:left; width:86px; height:30px;
}  ​

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

Or

You can do this with just using CSS3:

CSS3 animate jsFiddle example here.

div {
    float:left; background: url(https://i.sstatic.net/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; } ​

Upvotes: 2

John Koerner
John Koerner

Reputation: 38079

You can use the animate jquery method:

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);  
});

Upvotes: 1

CoreyRS
CoreyRS

Reputation: 2267

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

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

Change the values of the marginTop accordingly.

These will also help:

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

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

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

Upvotes: 2

Related Questions