0

アニメーションを一時的に無効にする方法は？

私は持っています、.move_boxそしてあなたがそれをクリックすると、それは拡大します。その上にボックスを閉じるX.move_boxがあります（同じアニメーションはパラメータを逆にするだけです）。

問題は、そのXをクリックすると、ボックスが閉じて、最初のアニメーションをトリガーするXがオンになっているため、オープニングアニメーションが再度実行されることです。.move_box

HTML

<div class="box move_box">
    <div class="box_title">
        <label>BODY CONDITION</label><h6 class="exit">X</h6>
    </div>
    <div class="box_image">
        <img src="http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg" alt="" />
    </div>
</div>

JQuery

$(document).ready(function(){
    $('.move_box').click(function(){
        $(this).find('.exit').show();
        $(this).css({"z-index":"20"});
        $(this).animate({"height": "529px", "width": "460px"}, "slow");
        $(this).find('img').animate({"width": "460px"}, "slow");
    });

    $('.exit').click(function(){
        $(this).parent().parent().find('img').animate({"width": "220px"}, "slow");
        $(this).parent().parent().animate({"height": "163px", "width": "220px"}, "slow");
        $(this).hide();
    });
});

JSFiddle。

それを修正する方法は？

4

2 に答える 2

1

X 要素は .movi​​e_box div 内にあるため、X 要素をクリックすると、イベントがその親の要素に伝播されます。あなたはそれを止めなければなりません。

.exit のクリック関数にパラメーターを追加し、メソッド stopPropagation を呼び出します。

$('.exit').click(function(e){
        $(this).parent().parent().find('img').animate({"width": "220px"}, "slow");
        $(this).parent().parent().animate({"height": "163px", "width": "220px"}, "slow");
        $(this).hide();
        e.stopPropagation();
    });
于 2013-03-01T19:49:18.560 に答える
0 
$('.move_box').click(function(e){
    if ($(e.target).hasClass('exit')) {
        // the exit button was clicked, thus escape this handler
        return;
    }
于 2013-03-01T19:42:27.367 に答える