1

私は2つの部門を持っています。1つは前にあり、後ろからのものは右に移動してから、最初のものの上に戻ります。私はjQueryを使用しましたが、すぐにz-indexを変更し、1つの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 に答える