jQueryは、振る舞わないアニメーションボタンです
-
28-09-2019 - |
質問
わかりました、ボタンのインラインリストがあります。
<ul id="nav">
<li class="home"><a href="#">Menu Item</a></li>
<li class="contact"><a href="#">Menu Item</a></li>
<li class="about"><a href="#">Menu Item</a></li>
</ul>
.home{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line.png);
background-repeat:no-repeat;
height:34px;
width:134px;
}
.home_hover{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line_over.png);
background-repeat:no-repeat;
height:70px;
width:134px;
}
$(document).ready(function(){
$("#nav .home").mouseover(function(){
$(this).toggleClass("home_hover").slideToggle("slow");
return false;
}).mouseout(function(){
$(this).toggleClass("home_hover").slideToggle("slow");
return false;
});
});
各メニュー項目には背景画像があり、その後、背景画像が背の高い画像に置き換えられます。最終的に、マウスオーバー上でメニュー項目がスライドするように見えるシンプルなメニューを作成しようとしています。しかし、実際には、JQueryはSlidetoggleでToggleclassをアニメーション化できます。問題は、この現在のコードが正しく動作しないことです。
テキストが動いているため、上下にジャンプします。私はjqueryをかなり初めてなので、どんな助けも大歓迎です。私もこれをロードしました http://gasworks.ravennainteractive.com/result/
ありがとう
解決
これを試して (デモ):
CSS:
#header{
height:100px;
}
#nav{
height:34px;
position:relative;
}
.home{
position:absolute;
bottom:0;
background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line.png);
background-repeat:no-repeat;
height:34px;
width:134px;
}
.home_hover{
background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line_over.png);
}
脚本
$(document).ready(function(){
$("#nav li").mouseover(function(){
$(this).addClass('home_hover').stop().animate({ height: '70px'},'slow');
}).mouseout(function(){
$(this).stop().animate({ height: '34px'},'slow', function(){
$(this).removeClass('home_hover');
})
});
});
所属していません StackOverflow