JQuery 1點擊火災2條件（如果）

Question

$('.anfahrt').click(function() { 
    $button = $(this); 
    if (clickedc == 0){ 
     if(!$button.hasClass('disabled')) { 
      $button.addClass('disabled'); 
      clickedc = 1 
      $('.lupe').animate({opacity: '0'},750) 
      $('.card > img').animate({height: 150, width: 193, opacity: '1', left: 0, top: 9},500) 
      $('.contact-content2').animate({opacity:'1'},500).animate({opacity: '0'},500) 
      $('.cardgreen > img').animate({height:150, width: 193, opacity: '0'},500).animate({opacity: '1', top: 9},500, 
      function() { $button.removeClass('disabled') } 
      ); 
     } 
    } 
}); 

$(document).(click(function() { 
    $button = $(this); 
    if (clickedc == 1){ 
     if(!$button.hasClass('disabled')) { 
      $button.addClass('disabled'); 
      clickedc = 0 
      $('.cardgreen > img').animate({opacity: '0'},300).animate({height:0,width:0}); 
      $('.contact-content2').show(0).animate({opacity: '1'},300) 
      $('.clickding').animate({width: '0', height: '0'},0) 
      $('.card > img').animate({opacity: '1'},300) 
       .animate({opacity: '0', width: 0, height: 0, left:194, top:75},270, 
      function() { $button.removeClass('disabled') } 
      ); 
     } 
    } 
})); 

所以我點擊div ..和動畫開始（淡入淡出）。然後它應該停止...然後用戶單擊文檔上的任何地方，第二個動畫（fadeout）應該開始。 - 但這不起作用..因爲當第二個動畫馬上開始後，我點擊Div淡入淡出動畫開始。 Theres no stop ..請幫我解決這個問題。

Answer 1

這樣做的原因是，當你點擊div click事件被冒泡到文檔的水平。

你想用什麼方法stopPropagation上的事件：

$("#yourdiv").click(function(event){ 
    alert("Your div clicked"); 
    event.stopPropagation(); 
}); 

Answer 2

對於div上的單擊事件：http://api.jquery.com/event.stopPropagation/。它會阻止事件冒泡到文檔級別。

Answer 3

我相信你的問題在於事實，你結合你的 動畫點擊事件的一次。因此，您單擊DIV，它的 動畫觸發器，但同時也引發了$(document)點擊 事件，所以這就是爲什麼你看到的堆疊 發生。

爲了緩解這個問題，我感動了.click()事件的登記上 $(document)到div的單擊事件並刪除了需要 有clickc標誌，因爲一旦文檔的單擊事件被觸發 需要解除綁定護理本身。也許這種方法產生的

的一個問題是，如果用戶點擊 再次格動畫都將再次發生。但我把 作爲練習。

此解決方案未經測試。

function open_animation() { 
    $('.lupe').animate({opacity: '0'},750) 
    $('.card > img').animate({height: 150, width: 193, opacity: '1', left: 0, top: 9},500) 
    $('.contact-content2').animate({opacity:'1'},500).animate({opacity: '0'},500) 
    $('.cardgreen > img').animate({height:150, width: 193, opacity: '0'},500).animate({opacity: '1', top: 9},500, function() { $button.removeClass('disabled') }); 
} 

function close_animation() { 
    $('.cardgreen > img').animate({opacity: '0'},300).animate({height:0,width:0}); 
    $('.contact-content2').show(0).animate({opacity: '1'},300) 
    $('.clickding').animate({width: '0', height: '0'},0) 
    $('.card > img').animate({opacity: '1'},300).animate({opacity: '0', width: 0, height: 0, left:194, top:75},270, function() { $button.removeClass('disabled')}); 
} 

$('.anfahrt').click(function() { 
    $button = $(this); 
    if(!$button.hasClass('disabled')) { 
     $button.addClass('disabled'); 
     open_animation() 
     $(document).click(function() { 
      $button = $('.anfahrt'); 
      if(!$button.hasClass('disabled')) { 
       $button.addClass('disabled'); 
       close_animation(); 
       $(document).unbind('click'); 
      } 
     }); 
    } 
});