javascript - jQuery - picture snaps to wrong place -


What happens when you click on IMG2, this animation does, but the image 3 bus IMAGA 1 Pulls to the left of! I do not know why

  $ (document) .ready (function () {$ (document) .on ('click', 'left', function () {$ idr Attr (" id ") $ Attr ("id") $ idt = $ ('top.) Attr ("id") $ (' # '+ $ Idl) .animate ({' margin-top ' : '0', 'width': '500'}, 650, function () {$ ('#' + $ idl) .removeClass ('(' '' '' top ')} $ (' # '+ $ id Sammet ({'margin-left': '253', 'margin-top': '358', 'width': '247'}, 650, function () {$ ('#' + $ idt). RemoveClass ('top') addClass ('right')} $ ('#' + $ idr) .animate ({'margin AddClass (' left ')})}}}})   "left": '0'}, 650, function () {$ ('#' + $ idr) .removeClass Pre> 
  # img1 {status: absolute; width: 500px; height: auto}} .left, .right {position: absolute; height: auto; margin-top: 1px; cursor: indicator;} # img2 {Margin-top: 358px; Width: 247px; } # Img3 {margin-top: 358px; Margin-left: 253px; Width: 247px; } # Slider {width: 504px; }  
  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/JQuery/1.1.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Div id = "slider" & gt; & Lt; Img id = "img1" class = "top" draggable = "false" src = "http://s9.postimg.org/ygz34rwv3/pr1.jpg" & gt; & Lt; Img id = "img2" class = "left" draggable = "false" src = "http://s9.postimg.org/c2heoju3j/pr2.jpg" & gt; & Lt; Img id = "img3" class = "right" draggable = "false" src = "http://s9.postimg.org/rch9vqplr/pr3.jpg" & gt; & Lt; / Div & gt;  

This is because This top position is not fully deployed after the animation. You can fix this by adding the position property to the .top class:

  .top, .left, .right {position: absolute; Height: auto; Margin-top: 1px; Cursor: indicator; }  

Demo:

There is a little restructured Javascript code here.


Comments

Popular posts from this blog

winforms - C# Form - Property Change -

java - Messages from .properties file do not display UTF-8 characters -

javascript - amcharts makechart not working -