0

うまく機能する一連のアクションがあります:
1- 赤をクリックします。赤いアニメーションが下に、灰色のアニメーションが上
に 2- 背景をクリック (html) 灰色が下に、赤が上に

問題は、ユーザーが（偶然に）背景をクリックしてから赤くしたときに発生します。この場合は 1、2 となり、その後は次のようになります。

3-赤が上がる

このステップ 3 が発生する理由と回避方法がわかりません。

ここであなたの答えを確認してください

HTML:

<div id="red"></div>   
<div id="grey"></div>

CSS:

#red {
    position: fixed;
    bottom: 20px; right: 25px;
    width:80px; height:50px;
    cursor:pointer; 
    background:red;
}

#grey{
    position:fixed;
    bottom:-40px;
    width:100%; height:40px;
    background:grey;
}

Jクエリ:

$(function(){   
    $("#red").click(function(event) {
        event.stopPropagation();
        $("#red").animate({bottom:'-80px'},1000);

        setTimeout(function () {
        $("#grey").animate({bottom:'0px'}, 500);
        }, 700);
    });

    $("html").click(function() {
        $("#grey").animate({bottom:'-40px'}, 800);

        setTimeout(function () {
        $("#red").animate({bottom:'20px'}, 1000);
        }, 500);

    }); 
})
4

1 に答える 1

0

利用する.stop()

$(function(){
    $("#red").click(function(event) {
        event.stopPropagation();
        $("#red").stop().animate({bottom:'-80px'},1000);

        setTimeout(function () {
        $("#grey").stop().animate({bottom:'0px'}, 500);
        }, 700);
    });

    $("html").click(function() {
        $("#grey").stop().animate({bottom:'-40px'}, 800);

        setTimeout(function () {
        $("#red").stop().animate({bottom:'20px'}, 1000);
        }, 500);    
    }); 
})

デモ--> http://jsfiddle.net/WG3md/2/

于 2013-05-25T09:35:44.573 に答える