jquery slideup/slideup effect does not work

Asked

Viewed 101 times

0

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

I was able to apply the slideup effect when closing the div on "X", but I’m not able to apply the slideup/slideup effects when changing the photo, only an effect of showing the div.

I put in jsfiddle all my attempts in jquery.

Thank you all.

jsfiddle

javascript jquery html css

  • You could change the line "$(this). find("+ div.info"). css("display", "block");" to "$(this). find("+ div.info"). slideDown("fast");", but in this way the effect would occur WHENEVER you click on an image. Either the effect always occurs, or only at the first click?

  • That’s right, Thiago Barros. Just a little something I realize now. When you click the image, the div has to close with slideup and open with slideDown with the other data. And when you click on the same image, you have to close the div.

1 answer

0

$(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>
  <div class="info">

    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/500">
      </div>
      <div class="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>
  <div class="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/501">
      </div>
      <div class="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>
  <div class="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/502">
      </div>
      <div class="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>
  <div class="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/503">
      </div>
      <div class="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>
  <div class="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/504">
      </div>
      <div class="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>
  <div class="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/507">
      </div>
      <div class="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>
  <div class="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/508">
      </div>
      <div class="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>
  <div class="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/509">
      </div>
      <div class="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>
  <div class="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/510">
      </div>
      <div class="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>
  <div class="info">
    <div class="row">
      <div class="col-sm-5 col-md-5 col-lg-5">
        <img src="https://unsplash.it/511">
      </div>
      <div class="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>

Just change that part: $(this).find("+ div.info").css("display", "block"); for $(this).find("+ div.info").css("display", "block").hide().slideDown();

Edit according to comment:

Replace:

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

for:

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

  • Or change the line to "$(this). find("+ div.info"). slideDown("fast");", as I mentioned, but the effect will always occur (as in your example), and the user - still - hasn’t said how he imagines the result.

  • That’s right, Jessica. Just a little something I realize now. When you click the image, the div has to close with slideup and open with slideDown with the other data. And when you click on the same image, you have to close the div

  • I updated, take a look!

  • Thanks, Jessica, sorry I’m late, I’ve been resting. That’s almost right, in case it appears with this link http://animasom.com.br/, that when you click the div goes up and down.

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.