マウスオーバーするとテキストが横に揺れ動いたり、縦に揺れ動いたり、点滅、文字がびよーんと伸び縮みするような動きをする簡単なJQueryコードを紹介します。
サイトに動きが出るのでちょっとしたアクセントになると思います。

マウスオーバーするとテキストが横に揺れ動く

マウスオーバーするとテキストが横に揺れ動きます。

• HOME
• MENU
• SUBMENU1
• SUBMENU2

html

<ul class="mouseover-text-animation-nav1">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">SUBMENU1</a></li>
<li><a href="#">SUBMENU2</a></li>
</ul>

JQuery

<script type="text/javascript">
$(function(){
$(".mouseover-text-animation-nav1 a").hover(function(){
$(this).css({position: 'relative'})
$(this).stop()
.animate({left:"-20"},100)
.animate({left:"20"},200)
.animate({left:"-5"},100)
.animate({left:"5"},100)
.animate({left:"0"},50)
},
function(){
$(this).stop(true, false)
.animate({left:"0"})
});
});
</script>

マウスオーバーするとテキストが縦に揺れ動く

マウスオーバーするとテキストが縦に揺れ動きます。

• HOME
• MENU
• SUBMENU1
• SUBMENU2

html

<ul class="mouseover-text-animation-nav2">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">SUBMENU1</a></li>
<li><a href="#">SUBMENU2</a></li>
</ul>

JQuery

<script type="text/javascript">
$(function(){
$(".mouseover-text-animation-nav2 a").hover(function(){
$(this).css({position: 'relative'})
$(this).stop()
.animate({top:"-5"},100)
.animate({top:"5"},200)
.animate({top:"-3"},100)
.animate({top:"3"},100)
.animate({top:"0"},50)
},
function(){
$(this).stop(true, false)
.animate({top:"0"})
});
});
</script>

マウスオーバーするとテキストが点滅

マウスオーバーするとテキストが点滅します。

• HOME
• MENU
• SUBMENU1
• SUBMENU2

html

<ul class="mouseover-text-animation-nav3">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">SUBMENU1</a></li>
<li><a href="#">SUBMENU2</a></li>
</ul>

JQuery

<script type="text/javascript">
$(function(){
$(".mouseover-text-animation-nav3 a").hover(function() {
$(this).stop()
.fadeTo(200,0)
.fadeTo(200,1)
.fadeTo(200,0)
.fadeTo(200,1)
.fadeTo(200,0)
.fadeTo(200,1)
},
function(){
$(this).stop(true, false)
.fadeTo(200,1)
});
});
</script>

マウスオーバーするとテキストがびよーんと伸び縮み

マウスオーバーするとテキストがびよーんと伸び縮みします。

• HOME
• MENU
• SUBMENU1
• SUBMENU2

html

<ul class="mouseover-text-animation-nav4">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">SUBMENU1</a></li>
<li><a href="#">SUBMENU2</a></li>
</ul>

JQuery

<script type="text/javascript">
$(function(){
$(".mouseover-text-animation-nav4 a").hover(function() {
$(this).css({position: 'relative'})
$(this).stop()
.animate({left:"-5",letterSpacing: "-5"},100)
.animate({left: "5",letterSpacing: "35"},500)
.animate({left:"-10",letterSpacing: "-3"},300)
.animate({left: "3",letterSpacing: "10"},200)
.animate({left:"-2",letterSpacing: "-2"},100)
.animate({left: "1",letterSpacing: "5"},100)
.animate({left: "0",letterSpacing: "0"},50)
},
function(){
$(this).stop(true, false)
.animate({left: "0",letterSpacing: "0"})
});
});
</script>

以上がマウスオーバーでテキストが動く簡単なJqueryコードの紹介でした。アイデアしだいではとても可愛い感じに演出できるとおもいます。

最終更新日: 2012年12月29日