javascript - How do I move one <div> in front of another <div>, and back? -


i have 2 divs. 1 in front, , want 1 move right, , on top of first one. used jquery, changes z-index immediately, , proceeds moving 1 div right , left it's original position. how i've tried it:

<!doctype html> <html> <head>     <style>         .block {          position: absolute;          background-color: #abc;         left: 0px;         top:30px;         width: 60px;          height: 60px;         margin: 5px;          }          .block1 {          position: absolute;          background-color: red;         left: 0px;         top:30px;         width: 60px;          height: 60px;         margin: 5px;         z-index: 999;         }     </style>   <script src="js/jquery-1.10.2.min.js"></script> </head> <body>  <div class="block" onmouseout="hide();"></div> <div class="block1" onmouseover="show();"></div>  <script> function show() {     $(".block").animate({left: '+=100px'}, 2000);     $(".block1").css('zindex', '-10000');     $(".block").animate({left: '-=100px'}, 2000); };  function hide() {     $(".block").animate({left: '+=100px'}, 2000);     $(".block1").css('zindex', '10000');     $(".block").animate({left: '-=100px'}, 2000); }; </script>  </body> </html> 

the animate method asynchronous. have change z-index after have finished first animation providing callback function animate method:

function show() {     $(".block").animate({left: '+=100px'}, 2000, function() {         $(".block1").css('zindex', '-10000');         $(".block").animate({left: '-=100px'}, 2000);     }); }; 

from documentation .animate():

.animate( properties [, duration ] [, easing ] [, complete ] )

complete
type: function()
function call once animation complete.


Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -