studio-benkei

jqueryを使ってテキストリンクをアニメーションでスムーズにスライドさせるスクリプト紹介します。

• 写真部屋
• 京都紅葉
• 王子動物園
• 書写山
• お気に入り写真
• Photo-Blog

JavaScript ▼

            $(document).ready(function() {
              $('a.slide').hover(function() { //mouse in
                $(this).animate({ paddingLeft: '20px' },400);
              }, function() { //mouse out
                $(this).animate({ paddingLeft: 0 }, 400);
              });
            });
            
          

HTML ▼

           <ul>
              <li><a href="#" class="slide">写真部屋</a></li>
              <li><a href="#" class="slide">京都紅葉</a></li>
              <li><a href="#" class="slide">王子動物園</a></li>
              <li><a href="#" class="slide">書写山</a></li>
              <li><a href="#" class="slide">お気に入り写真</a></li>
              <li><a href="#" class="slide">Photo-Blog</a></li>
            </ul>