JQuery臨時禁用動畫時執行另一個

我有一個.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。

如何解決？

來源

2013-03-01 Vucko

綁定到.exit第一，在使用結束它的處理程序，點擊退出時方式，move_box返回false元素不會收到事件。 – 2013-03-01 19:46:22

我們有一些事情叫做，停止使用動畫。（「＃stop」）。click（function（）{（＃＃panel）。stop（）; }）; – 2013-03-01 19:46:23

如果這有幫助，請告訴我。 Regards – 2013-03-01 19:47:20

因爲X元素是.movie_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-01 19:49:18 vintem

作品，謝謝。 – Vucko 2013-03-01 20:00:54

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

來源

2013-03-01 19:42:27

JQuery臨時禁用動畫時執行另一個

回答

相關問題