Question

我遇到了fadeIn / fadeOut的问题我的目标是点击将淡入div的按钮，如果我点击div之外，该div将为FadeOut。但问题是，当我使用我的代码时，所有事件都在同一时间发生，一次点击就意味着FadeIn和FadeOut。我怎么能在适当的时候做FadeOut那个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();
  }    
});

Answer 1

这可能与事件传播（冒泡）有关 - 您可以阅读相关内容。您的HTML不完整，因此无法提供示例解决方案。

基本解决方案是使用变量并跟踪可见性状态。这是一个粗略的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery - 在fadeIn之后点击外部fadeOut div

1 个答案: