シンプルな事はJQueryだけでやった方が良い！ -- 画像をスライドするエフェクト

jQuery

お客様の要望で、画面上で画像をスライドする Javascriptを作りました。

デモ → http://ey-office.net/samples/090523/slider.html


最初は、JQueryのプラグインを探して使ってみたのですが、どれも機能が多すぎていまひとつでした。
そこで色々と調べてみると、Queryの animate()と CSS の overflow: hidden を組み合わせると簡単に出来そうなので作ってみました(既にたくさんの方も作ってると思いますが・・・)


今回、勉強になった事としては、シンプルな事はJQueryだけでやった方が良いということでした。
プラグインは適当なものを探すのにも、自分のやろうとしている事が出来るのか検証するのにも案外と時間がかかります。そんなことに時間を使わなくても JQuery はベースだけでも結構強力です ^^)


コード

<html>
<head>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <style type="text/css">
     div#photo {
      background-image: url(init.png);
      background-position: 0px 0px;
      overflow: hidden;
      width: 211px;
      height: 141px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="photo"></div>
  <button id="action"> Action </button>
</body>  
<script type="text/javascript">
  $("#action").click(function(){
    $("#photo").css("background-image", "url(slider.png)");
    $("#photo").animate({backgroundPosition: '-534px 0px'}, 2000);
  });
</script>
</html>