David Pešava David Pešava - 5 months ago 23
jQuery Question

jQuery - fadeOut the div with click outside , after fadeIn

I have got problem with fadeIn/fadeOut
My target is to click on button that will FadeIn the div and that if I click outside the div, that div will FadeOut. But problem is when i use my code all events happen in same time, it means FadeIn and FadeOut after one click. How can I do that div will FadeOut in right moment?

<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

This might have something to do with event propagation (bubbling) - you can read about that. Your HTML is not complete so cannot provide a sample solution.

Basic solution is to use a variable and keep track of visibility state. Here is a rough example to play with:

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>

Comments