<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ $("#image1").click(function(){ $("p:not(:animated)").animate({ marginLeft:"-200px", }, "slow", "swing") }); $("#image2").click(function(){ $("p:not(:animated)").animate({ marginLeft:"0", }, "slow", "swing") }); }); /* $(セレクター).animate(値を変更したいCSSプロパティ,スピード,動き,コールバック関数); 値を変更したいCSSプロパティ ・数値(px, em, %)であらわせるもの 動き ・linear:常に一定の速度 ・swing:最初はゆっくり・後半は速い速度 */ </script> <style> img{ float:left; cursor:pointer; } p{ width:400px; height:200px;; margin:0; } div{ width:200px; height:200px; overflow:hidden; } </style> </head> <body> <div><p> <img id="image1" src="img/image1.png"> <img id="image2" src="img/image2.png"> </p></div> </body> </html>