１．ボタンの変化
( attrやfadeOut()やanimateを使う。)
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> <script> $(function(){ $('.over').each(function(){ $(this).hover( function(){ var overID=$(this).attr('id'); /* 変数の定義 */ $(this).fadeOut().attr({'src':'gazou/'+overID+'_on.gif'}).stop(true, true).animate({'opacity':'show'},1000); }, function(){ var overID=$(this).attr('id'); /* 変数の定義 */ $(this).fadeOut().attr({'src':'gazou/'+overID+'_off.gif'}).stop(true, true).animate({'opacity':'show'},0); } ); }); }); </script>
<div> <ul id="move"> <li> <a href="#"><img src="gazou/home_off.gif" id="home" class="over" alt=""></a> </li> <li> <a href="#"><img src="gazou/blog_off.gif" id="blog" class="over" alt=""></a> </li> <li> <a href="#"><img src="gazou/photo_off.gif" id="photo" class="over" alt=""></a> </li> <li> <a href="#"><img src="gazou/letter_off.gif" id="letter" class="over" alt=""></a> </li> </ul> </div>
fadeOut() や animate を使って切り替えの時間を指定しています。attr だけだと、すぐに切り替わってしまいます。
注意点は .stop(true, true) を書く事です。これを省略すると動作が不安定になります。
.each(function(){$(this) ・・・}); は（・・・を除いて）省略できます。
縦型も同様に変化します。
