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
Post a Comment