jQuery - 淡入淡出之後點擊外部，淡入淡出

我有淡入淡出的問題/淡入淡出我的目標是點擊按鈕，將淡入淡出在div中，如果我點擊外部div，該div將淡入淡出。但問題是，當我使用我的代碼時，所有事件都發生在同一時間，這意味着一次點擊後FadeIn和FadeOut。我該如何做到這一點div將FadeOut適時？jQuery - 淡入淡出之後點擊外部，淡入淡出

<div class="col-xs-12 col-md-6 col-sm-6 portfolio_page__box" id="portfolio_page__item1"> 
    <div class="portfolio_page__button1" id="portfolio_page--item1_showup"> 
    <p>INFO</p> 
    </div> 
</div> 
<div id="portfolio_page__item1_showup_table"></div>

的jQuery：

$(function() { 
    $("#portfolio_page--item1_showup").click(function() { 
    $("#portfolio_page__item1_showup_table").fadeIn("slow"); 
    $(".portfolio_page__box").fadeOut("slow"); 
    }); 
}); 

$(document).click(function() {  
    if (this.id != 'portfolio_page__item1_showup_table') { 
    $("#portfolio_page__item1_showup_table").hide(); 
    }  
});

來源

2016-06-07 David Pešava

你能解釋一下我_How能做到這一點的div將淡出在合適的時機_ –

首先，DIV有淡入和在那裏？正確的時刻意味着 - 點擊外部div後fadeOut。 –

通常，這些問題是由於未使用fadeIn/Out命令的回調引起的。如果你通過fadeOut作爲淡入淡出的回調，這可能會讓你在正確的方向。 –

這可能是與事件傳播（冒泡） - 你可以閱讀一下。您的HTML不完整，因此無法提供示例解決方案。

基本解決方案是使用變量並跟蹤可見性狀態。這裏是一個粗略的例子玩：

var viz = false; 
 
$(function() { 
 
    $("#portfolio_page--item1_showup").click(function() { 
 
    $("#portfolio_page__item1_showup_table").fadeIn("slow", function(){ 
 
     viz = true; 
 
    }); 
 
    $(".portfolio_page__box").fadeOut("slow"); 
 
    }); 
 
}); 
 

 
$(document).click(function() { 
 
    if (viz) { 
 
    $("#portfolio_page__item1_showup_table").hide(); 
 
    viz = false; 
 
    } 
 
});

.btn{padding:10px;border:1px solid orange;} 
 
#portfolio_page__item1_showup_table{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="col-xs-12 col-md-6 col-sm-6 portfolio_page__box" id="portfolio_page__item1"> 
 
    <div class="portfolio_page__button1 btn" id="portfolio_page--item1_showup"> 
 
    <p>INFO</p> 
 
    </div> 
 
</div> 
 
<div id="portfolio_page__item1_showup_table"> 
 
    <table> 
 
    <tr><td>Cell 1</td><td>Cell 2</td></tr> 
 
    <tr><td>Cell 3</td><td>Cell 4</td></tr> 
 
    </table> 
 
</div>

來源

2016-06-07 18:38:45 gibberish

它的工作原理！謝謝：） –

jQuery - 淡入淡出之後點擊外部，淡入淡出

回答

相關問題