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

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

• javascript
• jquery
• css

• I think you have o write a reverse transition class to work it out. – Sree Commented May 17, 2015 at 19:13
• Find my pure css based solution below. No Javascript or jQuery required for this, just intelligent use of available css selectors and the corresponding markup. Also, this works across all relevant browsers - even those that do not support transitions will still hide/show the .test1 content. And it will work even with Javascript disabled. It demonstrates a technique that you can apply in many cases once understood! – connexo Commented May 17, 2015 at 19:18
• @connexo i am trying it with Javascript because of i want to use Ajax and PHP. – user4082764 Commented May 17, 2015 at 19:22
• Taking that for granted you still don't need to use any jQuery or Javascript for this. It's even easier to implement in pure CSS. Did you check and understand my codepen example? – connexo Commented May 17, 2015 at 19:30
• 1 Simply add the time as a parameter: $(".test").show(500); $(".test").hide(500); – Avatar Commented Mar 20, 2022 at 8:09

4 Answers 4

You don't need jQuery for this at all. Check this example:

http://codepen.io/anon/pen/JdKWWW

.hide-show-element {
  background-color: #eee;
  height: 400px;
  position: relative;
  text-align: center;
  width: 400px;
}

.hide-show-element input[type='checkbox'] {
  display: none;
}
.hide-show-element label {
  background-color: #a00;
  border: 1px solid #111;
  color: #fff;
  display: block;
  text-align: center;
  transition-duration: 0.4s;
}
.hide-show-element label:after {
  display: block;
  content: "Show";
}
.hide-show-element input:checked + label {
  background-color: #fff;
  border: 1px solid #a00;
  color: #a00;
}
.hide-show-element input:checked + label:after {
  content: "Hide";
}

.test1 {
  opacity: 0;
  position: relative;
  height: 0;
  top: 20%;
  transition-duration: 0.4s;
  width: 0;
}

.hide-show-element input:checked ~ .test1 {
  opacity: 1;
  height: 200px;
  width: 200px;
}

<div class="hide-show-element">
  <input type="checkbox" id="toggle" />
  <label for="toggle"></label>
  <img class="test1" src="http://lorempixel./200/200" />
</div>

$('#id-of-your-div').fadeOut(); //fade out

$('#id-of-your-div').fadeIn(); //fade in div

check documentation for more info.

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

Assuming you are actually talking about literal css transitions, toggle a class on and off. If you want it to fade out then display none, you'll need to use a timeout of the length of your animation that sets to display none at the end. There's no way to keyframe with transitions.

$(document).ready(function() {
  $('.usr').click(function() {
   $(".test").css('display','block').removeClass('hidden');
  });
  $(".hide").click(function() {
    $(".test").addClass('hidden');
    setTimeout(function(){
        $(".test").css('display','none')}, 500 //Animation Time
     )
  });
});

--

.test{
    opacity:1;
    transition:500ms cubic-bezier(0,0,0.58,1);
    -webkit-transition:500ms cubic-bezier(0,0,0.58,1);

}
.hidden{
    opacity:0;
}