Question

如何临时禁用动画？

我有.move_box，当您点击它时，它会展开。在.move_box上有一个 X 关闭框（相同的动画只有反向参数）。

问题是，当您点击 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

如何解决？

Answer 1

因为X元素在.movie_box div中，所以当您单击X元素时，事件将传播到其父元素。你必须阻止它。

在.exit上的click函数中添加一个参数，并调用方法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();
    });

Answer 2

$('.move_box').click(function(e){
    if ($(e.target).hasClass('exit')) {
        // the exit button was clicked, thus escape this handler
        return;
    }

执行另一个时，JQuery临时禁用动画

2 个答案: