Javascript 如何将一个移动到另一个的前面和后面？_Javascript_Jquery

Javascript 如何将一个移动到另一个的前面和后面？

javascript jquery

Javascript 如何将一个移动到另一个的前面和后面？,javascript,jquery,Javascript,Jquery,我有两个div。一个在前面，我希望后面的那个向右移动，然后回到第一个上面。我使用了jQuery，但它会立即更改z-index，然后继续向右移动一个div，再向左移动到原始位置。我就是这样尝试的： <!DOCTYPE html> <html> <head> <style> .block { position: absolute; background-color: #abc;

我有两个div。一个在前面，我希望后面的那个向右移动，然后回到第一个上面。我使用了jQuery，但它会立即更改z-index，然后继续向右移动一个div，再向左移动到原始位置。我就是这样尝试的：

<!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>

动画方法是异步的。完成第一个动画后，必须通过向动画方法提供回调函数来更改z索引：

从以下文件中：

完整的类型：功能动画完成后要调用的函数

动画方法是异步的。完成第一个动画后，必须通过向动画方法提供回调函数来更改z索引：

从以下文件中：

完整的类型：功能动画完成后要调用的函数

在第一个动画完成后，必须通过回调函数触发其余操作

雷德里打败了我

在第一个动画完成后，必须通过回调函数触发其余操作

雷德里打败了我

您可以使用setimeout

首先，将其设置为左侧动画。然后在设置超时后，您可以更改z索引并将其移到右侧

以下是设置超时的一些示例：

你可以使用setimeout

首先，将其设置为左侧动画。然后在设置超时后，您可以更改z索引并将其移到右侧

以下是设置超时的一些示例：

哇，太快了：Thanx！：@尼纳德：如果这个答案对你有帮助，你应该接受它。哇，太快了：Thanx！：@尼纳德：如果这个答案对你有帮助，你应该接受它。

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

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

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

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