1

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

3 回答 3

3

该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 ] )

complete
类型：Function()
动画完成后调用的函数。

于 2013-07-25T13:27:08.377 回答
1 
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);
    });
};

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

Raidri 打败了我！

于 2013-07-25T13:28:19.607 回答
0

那么你可以使用setimeout()。

首先你把它动画到左边。然后在 setTimeout 之后，您可以更改 z-index 并将其向右移动！

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

于 2013-07-25T13:32:51.123 回答