javascript - jQuery - picture snaps to wrong place -

javascript - jQuery - picture snaps to wrong place -

what happens is, when click on img2, animation, afterwards img3 snaps left of img1! don't know why.

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $(document).on('click', '.left', function() { $idr = $('.right').attr("id") $idl = $('.left').attr("id") $idt = $('.top').attr("id") $('#' + $idl).animate({ 'margin-top': '0', 'width': '500' }, 650, function() { $('#' + $idl).removeclass('left').addclass('top') }) $('#' + $idt).animate({ 'margin-left': '253', 'margin-top': '358', 'width': '247' }, 650, function() { $('#' + $idt).removeclass('top').addclass('right') }) $('#' + $idr).animate({ 'margin-left': '0' }, 650, function() { $('#' + $idr).removeclass('right').addclass('left') }) }) }) class="snippet-code-css lang-css prettyprint-override">#img1 { position: absolute; width: 500px; height: auto; } .left, .right { position: absolute; height: auto; margin-top: 1px; cursor: pointer; } #img2 { margin-top: 358px; width: 247px; } #img3 { margin-top: 358px; margin-left: 253px; width: 247px; } #slider { width: 504px; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slider"> <img id="img1" class="top" draggable="false" src="http://s9.postimg.org/ygz34rwv3/pr1.jpg"> <img id="img2" class="left" draggable="false" src="http://s9.postimg.org/c2heoju3j/pr2.jpg"> <img id="img3" class="right" draggable="false" src="http://s9.postimg.org/rch9vqplr/pr3.jpg"> </div>

it happens because top image not absolutely positioned after animation occupies space. can prepare adding position property .top class:

.top, .left, .right { position: absolute; height: auto; margin-top: 1px; cursor: pointer; } demo: http://jsfiddle.net/z3neveug/2/

here one more version of same little refactored javascript code.

javascript jquery