Jquery slideUp / slideUp effect does not work

Question

Jquery slideUp / slideUp effect does not work

Navigation

#1 by (0 votes)

0

Good afternoon everyone, I'm creating a gallery on a website but it has an effect on slideDown when clicking the image that descends a div that has a larger photo and a description. When I click on another photo it closes the div on slideUp.

I was able to apply the slideUp effect when I close the div in "X", but I am not able to apply the slideUp / slideUp effects when changing the photo, only an effect of appearing to div.

I put jsfiddle all my attempts at jquery.

Thank you all.

jsfiddle

javascript html jquery css

asked by anonymous 26.04.2017 / 17:16

1 answer

Relationship between 3 tables with pivot Pagination of results

score 0 · Answer 1

$(document).ready(function() {
  $("div.item").click(function() {

    $("div.info").css("display", "none");
    $(this).find("+ div.info").css("display", "block").hide().slideDown();
  });
  $(".fechar").click(function() {
    $(".info").slideUp("400");
  });
});

img {
  height: auto;
  max-width: 100%;
}

.fechar {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 30px;
}

div.item {
  background-color: blue;
  border: red 5px solid;
  display: inline-block;
  height: auto;
  width: 200px;
}

div.info {
  background-color: grey;
  float: left;
  clear: both;
  width: 100%;
  height: auto;
  display: none;
  position: relative;
}

<div class="container">

  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">

    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/500"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>
  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/501"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>
  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/502"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>
  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/503"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>
  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/504"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>
  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/507"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>
  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/508"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>
  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/509"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>
  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/510"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>
  <div class="item">
    <img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/511"></div><divclass="col-lg-7 col-md-7 col-sm-7">
        <h3>SHOPPING DA GÁVEA</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
          iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
      </div>

    </div>


    <span class="fechar">x</span>
  </div>

</div>

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

Onlychangethispart:$(this).find("+ div.info").css("display", "block"); to $(this).find("+ div.info").css("display", "block").hide().slideDown();

Edit by comment:

Replace this part:

$("div.info").css("display", "none");
$(this).find("+ div.info").css("display", "block").hide().slideDown();

by:

    $("div.info").each(function() {
        if (! $(this).is( ":hidden" ) ) {
          $(this).slideUp();
        }
    });

    if ( $(this).find("+ div.info").is( ":hidden" ) ) {
      $(this).find("+ div.info").slideDown();
    } else {
      $(this).find("+ div.info").slideUp();
    }