jQuery - 在fadeIn之后通过点击外部来淡出div答案

【问题标题】：jQuery - fadeOut the div with click outside , after fadeInjQuery - 在fadeIn之后通过点击外部来淡出div
【发布时间】：2016-06-07 18:23:17
【问题描述】：

我遇到了淡入/淡出问题我的目标是单击将使 div 淡入的按钮，如果我在 div 外部单击，该 div 将淡出。但问题是当我使用我的代码时，所有事件都同时发生，这意味着单击后淡入和淡出。我该怎么做才能让 div 在适当的时候淡出？

<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();
  }    
});

【问题讨论】：

你能解释一下我怎样才能让div在适当的时候淡出？
首先，div 必须淡入并在那里。正确的时刻意味着 - 在 div 之外单击后淡出。
一般这些问题是由于没有使用fadeIn/Out命令的回调。如果您将fadeOut 作为回调传递给fadeIn，这可能会让您朝着正确的方向前进。

标签： jquery html css

【解决方案1】：

这可能与事件传播（冒泡）有关 - 您可以阅读相关内容。您的 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>

【讨论】：