javascript - Jquery div layers animate problem -

- 

i started learning jquery , problem baffles me.   have `div`s in container , when mouse on them resizes div , shifts divs in front offset. on mouseout, shifts div subtracting offset.   current code:      <html>         <head>             <script src="http://code.jquery.com/jquery-latest.js"></script>              <script language="javascript1.2">                  function resize(obj)                 {                     shift(parseint(obj.id[obj.id.length-1]));                     $("#"+obj.id).height("100px").width("100px") ;                  }                  function shift(id)                 {                     for(var i=id+1;i<=4;i++)                     {                         $("#hello"+i).stop().animate({"left":"+=60px"},1000) ;                     }                 }                  function shrink(obj)                 {                     $("#"+obj.id).height("64px").width("48px") ;                     reshrink(parseint(obj.id[obj.id.length-1]));                  }                 function reshrink(id)                 {                     document.getelementbyid('testvalue').innerhtml+=document.getelementbyid("hello2").style.left ;                      for(var i=id+1;i<=4;i++)                     {                         $("#hello"+i).stop().animate({"left":"-=60px"},1000) ;                     }                      document.getelementbyid('testvalue').innerhtml+=document.getelementbyid("hello2").style.left ;                 }             </script>         </head>          <body>              <h1>hello world!</h1>             <div id="formwrapper" style="height:180;width:530;">                  <div id="wrapper"  style="position:relative;bottom:20px;width:460px;left:40px;height:160px;background-color:green;overflow:auto;" ">                      <div id="hello1" style="position:absolute;left:0px;height:64px;bottom:0px;width:48px; background-color:black;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>                     <div id="hello2" style="position:absolute;left:49px;bottom:0px;height:64px;width:48px; background-color:maroon;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>                                       <div id="hello3" style="position:absolute;left:98px;bottom:0px;height:64px;width:48px; background-color:brown;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>                     <div id="hello4" style="position:absolute;left:147px;bottom:0px;height:64px;width:48px; background-color:white;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>                  </div>              </div>              <div id="testvalue" style="position:absolute;top:390px;background-color:yellow;height:100px;width:400px;">              </div>          </body>     </html>  quite simple really, nothing complicated in it.   found when mouseover , out rapid or maybe animation isn't complete - divs change more offset , overlaps. can please suggest how solve problem?  **edit:**  test, rapidly move mouse on first div.  edit: after following tommy's advice...i'm still having problems it..the same error. don't know whether make new thread, here modified code:  <code> <html>             <head>                     <script src="http://code.jquery.com/jquery-latest.js"></script>                      <script language="javascript1.2">                             var shouldmove = true,currprev=1,canshrink=false,attachedid=0 ;                             function resize(obj)                             {                                           attachedid=parseint(obj.id[obj.id.length - 1]);                                         if(currprev!=attachedid)                                         {                                                $("#hello"+currprev).height("64px").width("48px");                                                                                                               reshrink();                                              if(attachedid!=4)                                                 shift(4);                                             else                                                                                             resizeimg();                                              currprev = attachedid;                                         }                               }                             function resizeimg()                             {                                 $("#hello"+attachedid).height("100px").width("100px");                             }                             function shift(id)                             {                                            if(id!=attachedid+1)                                     $("#hello" + id).animate({"left": "+=52px", queue: true},function(){shift(--id)});                                 else                                     $("#hello" + id).animate({"left": "+=52px", queue: true},function (){resizeimg()});                              }                               function reshrink()                             {                                 document.getelementbyid("testvalue").innerhtml+=document.getelementbyid("hello2").style.left;                                 for(var i=currprev+1;i<=4;i++)                                     $("#hello" + i).animate({"left": "-=52px",  queue: true},1000);                                  document.getelementbyid("testvalue").innerhtml+=document.getelementbyid("hello2").style.left;                             }                               </script>             </head>              <body>                      <h1>hello world!</h1>                     <div id="formwrapper" style="height:180;width:530;">                              <div id="wrapper"  style="position:relative;bottom:20px;width:460px;left:40px;height:160px;background-color:green;overflow:auto;" ">                                      <div id="hello1" style="position:absolute;left:0px;height:100px;bottom:0px;width:100px; background-color:black;color:white;" onmouseover="resize(this);" ></div>                                     <div id="hello2" style="position:absolute;left:102px;bottom:0px;height:64px;width:48px; background-color:maroon;color:white;" onmouseover="resize(this);" ></div>                                                                    <div id="hello3" style="position:absolute;left:152px;bottom:0px;height:64px;width:48px; background-color:brown;color:white;" onmouseover="resize(this);" ></div>                                     <div id="hello4" style="position:absolute;left:202px;bottom:0px;height:64px;width:48px; background-color:white;color:white;" onmouseover="resize(this);" ></div>                              </div>                      </div>                      <div id="testvalue" style="position:absolute;top:390px;background-color:yellow;height:100px;width:400px;">                      </div>              </body>     </html> </code>

for quick fix try using .stop(true,true)


Comments

Post a Comment

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

-
my group , running server based upon django , uses mod_wsgi run apache server. not working on project after over, attempting set cronjob similar functionality check if apache server has shut down(system restart or power failure), , if has, restart server me. i've found documentation on how check if apache server down , restart server if is, our server uses https , our start command pretty verbose. can use functionality provided in these examples: https://askubuntu.com/questions/277389/cron-job-to-restart-apache https://www.digitalocean.com/community/tutorials/how-to-use-a-simple-bash-script-to-restart-server-programs or need more complicated process make happen? the command use start server is python manage.py runmodwsgi --host 0.0.0.0 --port 8001 --https-port 8000 --ssl-certificate (certificate location) --server-name (domain name) i'm pretty new linux , using both mod-wsgi apache appreciated. you better off using --setup-only option mod_wsgi-expres...
Read more

actionscript 3 - TweenLite does not work with object -

-
i got following problem: i have object called tempscore game. this object blitted canvas renderer via copypixels method. object not display object. it's score-object (self made). score-object extends object called basicblitarrayobject. basicblitarrayobject extends eventdispatcher (therefore no display object). i tried apply several different tweenlite-plugins tempscore-object (i.e. transformaroundcenter, colormatrixfilter, etc.). nothing happens. absolutely nothing. sometimes error messages (when plugin requires display object , object not display object). far good. according greensock (maker of tweenlite) engine can tween numeric property of object. when plugin transformaroundcenter requires display object tweening have modify plugin working non-display object (tempscore). can't because it's way hard me. my game rests upon code: http://www.8bitrocket.com/book/ch11_blastermines.zip try apply tweenlite object called tempmine inside game class blastermines. ...
Read more

jQuery Ajax Render Fragments OR Whole Page -

-
i'm in throes of building application wraps mess of legacy code. page working on, need substitute fragment divs constructed on back-end -- or else need replace entire page altogether. idea there dynamically controlled flow needs satisfied before can forward legacy product. substituting fragments works fine, seen in below my_body_content swap. trouble comes when i'm trying render not fragment, whole page, in "body" swap. @ point page goes blank. i want similar errors returned server. want nice rest 404 error messages displayed on screen, legacy-product 404s show in legacy-product 404 page. yes, requirements project weird. that's not problem can fix. here's jquery invocation, names changed protect guilty: $.ajax({ url: "places/things", type: "post", data: json.stringify(somebadassobject), datatype: "text", accepts: "text/html", contenttype: "application/json; charset=...
Read more