4

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();
  });
});
Improve this question
5
  • I think you have o write a reverse transition class to work it out. 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! Commented May 17, 2015 at 19:18
  • @connexo i am trying it with Javascript because of i want to use Ajax and PHP. 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? Commented May 17, 2015 at 19:30
  • 1
    Simply add the time as a parameter: $(".test").show(500); $(".test").hide(500); Commented Mar 20, 2022 at 8:09

4 Answers 4

Reset to default
5

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.com/200/200" />
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

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

check documentation for more info.

Improve this answer

2 Comments

thanks for your reply. but i still try this thing but didn't work with CSS transition effect.
you don't need css transition if you want to hid div with jquery, just fade it our or in, but if you want to assign class with the transition to div then use $('#id').addClass('your-css-class');
2

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

2 Comments

thanks for your nice answer. I am still try your think now. But i still don't want to use pure CSS based for solution.
I can only tell you that your css know-how will probably profit greatly if you invest the time to understand how it works.
0

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;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.