$('.box').click(function() { $(this).animate({ left: '-50%' }, 500, function() { $(this).css('left', '150%'); $(this).appendTo('#maki'); }); $(this).next().animate({ left: '50%' }, 500); });
body { padding: 0px; } #wrap{margin-left:100px;} #maki { overflow: hidden; position: relative; margin: 0px; padding: 0px; width: 100%; height: 320px; top:0;left:0; color: #e8ded2 ; } .box { position: absolute; width: 50%; left: 150%; top: 0px; margin-left: -25%; height: 300px; cursor: pointer ; line-height: 300px; font-size: 50px; text-align: center; } img{max-width: 100% ;height:auto;} .box1 { left: 50%; } /*Media Queries*/ /* Smartphones (portrait and landscape) */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } /* Smartphones (landscape) */ @media only screen and (min-width : 321px) { } /* Smartphones (portrait) */ @media only screen and (max-width : 320px) { } /* iPad (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } /* iPads (landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { } /* iPad (portrait) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { } /* Desktop and laptop */ @media only screen and (min-width : 1224px) { } /* Large screens */ @media only screen and (min-width : 1824px) { } /* iPhone 4 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
<div id="maki"> <div class="box1 box"><img src="http://farm4.staticflickr.com/3531/3873059255_016fe805d9.jpg" /></div> <div class="box2 box"><img src="http://farm3.staticflickr.com/2636/4090755093_ce5921f04a.jpg" /></div> <div class="box3 box"><img src="http://farm7.staticflickr.com/6024/5950842052_8498857af9.jpg" /></div> <div class="box4 box"><img src="http://farm5.staticflickr.com/4036/4719025385_61937f8652.jpg" /></div> <div class="box5 box"><img src="http://farm5.staticflickr.com/4012/4248892891_d2d8c63692.jpg" /></div> </div> <div id="wrap">Photo by <a href="http://www.flickr.com/photos/arcticpuppy/sets/72157625072844296/">Chris's</a> CC-BY</div>