Question

65

jquery hide div with CSS transition effect

rated 0 times [ 66] [ 1] / answers: 1 / hits: 19530 / 9 Years ago, sun, may 17, 2015, 12:00:00

I have one question about CSS hide transition using jquery hide function.

I have created this DEMO from codepen.io

In this demo you can see the show button. When you click the show button then .test and .user-image div opening with CSS transition effect .

I want to make it when clicked hide button then the .test div hide with CSS transition effect.

Anyone can tell me a little example how can i do that ?

CSS

<div class=container>

  <div class=usr>Show</div>

  <div class=test>

    <div class=hide>Hide</div>

    <div class=user-image style=background-image:url(...);></div>

  </div>



</div>

JS

$(document).ready(function() {

  $('.usr').click(function() {

   $(.test).show();

  });

  $(.hide).click(function() {

    $(.test).hide();

  });

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

andrewb

Add To Favorites

Follow

Total Points: 259

Total Questions: 124

Total Answers: 90

Location: Ivory Coast

Member since Sun, Mar 7, 2021

3 Years ago

andrewb questions

1 How can i access child component method in parent component using ref in Vue3?

Sun, Jun 12, 22, 00:00, 2 Years ago

1 TypeError: Cannot destructure property 'eligibleURLPatterns' of 'Yt' as it is null

Sun, May 1, 22, 00:00, 2 Years ago

1 Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No exports main defined in package.json

Sat, Oct 16, 21, 00:00, 3 Years ago

1 Is it okay to dispatch slice's action from another action in redux-toolkit?

Wed, Apr 21, 21, 00:00, 3 Years ago

1 Cannot find module axios - compatibility issue with typescript

Tue, Feb 2, 21, 00:00, 3 Years ago

View All

answered 9 Years ago shamya · Accepted Answer

If you insist on using jQuery, that's very easy to achieve as well. Define the styles to transition to when showing in a separate css class .show. Add transition-duration: 0.5s; to .test.

Then

$(document).ready(function() {

  $('.showHideToggle').click(function() {

      var toggle= $(this);

      if ($(.test).hasClass(show)) {

          toggle.text(Hide);

          $(.test).removeClass(show);

      }

      else {

          toggle.text(Show);

          $(.test).addClass(show);

      }

  });

});