[英]Jquery slide out menu items
我已經搜索並搜索了一個Jquery,到目前為止,我似乎找不到任何可以滿足我想要的東西的選項,但看起來卻是如此簡單。 誰能告訴我下圖中的菜單項如何在有人懸停時像第二項一樣滑出?
$('.menuClass').mouseover(function(){
$(this).animate({'marginTop':'100px'});
});
$('.menuClass').mouseout(function(){
$(this).animate({'marginTop':'0px'});
});
相應地更改marginTop的值。
這些也將幫助:
http://api.jquery.com/mouseover/
您可以為此使用多個CSS動畫方法。
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來做到這一點:
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方法:
$("#img").hover(function() {
$(this).stop();
$(this).animate({top:"0"},500,null);
}, function () {
$(this).stop();
$(this).animate({top:"-150"},500,null);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.