Jquery hide div with CSS transition effect
I have one question about transitioning CSS hide using jquery hide function.
I created this DEMO from codepen.io
In this demo, you can see the show button. When you press the show button, then .test
and .user-image
div opens with CSS transition effect.
I want to do this by clicking the hide button and then the .test
div to hide the CSS transition effect.
Anyone can tell me a small example how can I do this?
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();
});
});
source to share
If you insist on using jQuery, this is very easy to achieve. Define styles to navigate to impressions 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");
}
});
});
source to share
You don't need jQuery at all. Check out 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>
source to share
Assuming you are actually talking about literal css transitions, turn the class on and off. If you want it to disappear and then display it, you will need to use your animation's length timeout, which displays none at the end. There is no way to make a 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;
}
source to share