Question

我有两个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>

Answer 1

animate方法是异步的。通过向animate方法提供回调函数，您必须在完成第一个动画后更改z-index：

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

来自.animate()的文档：

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

<强>完整
  类型：功能（）
  动画完成后调用的函数。

Answer 2

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);
    });
};

您必须在第一个动画完成后通过回调函数触发剩余的操作。

拉里德打败了我！

Answer 3

你可以使用setimeout（）。

首先将其设置为左侧动画。然后在setTimeout之后，您可以更改z-index并将其移动到右侧！

以下是setTimeout的一些示例： http://www.jquery4u.com/jquery-functions/settimeout-example/

如何在另一个<div>前面移动一个<div>，然后返回？</div> </div>

3 个答案: