Apply css transition on showing and hiding div

Question

In the below code, I am toggling visibility of a div (id=popdiv) on click of a button. I want to add some transition effect to it. For example, right now it just pops up and hides. I want the transition to be a little slow while showing hiding but none of the transition or animation effects are working.

$('#pop').click(function(){

    $('#popdiv').toggle();

})

#popdiv{
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color: aqua; width: 50%; height: 20%;" >
    <button id="pop">CLICK</button>
</div>
<div style="background-color: cadetblue; width: 30%; height: 40%;" id="popdiv">
        POPUP
</div>

How to achieve this ?

Thanks in advance !

Does this answer your question? [Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) — Emiel Zuurbier, Oct 15 '20 at 06:14
`#popdiv{opacity:0; visibility:hidden; transition:.3s;}` use this css — Vitorino fernandes, Oct 15 '20 at 06:29

score 0 · Answer 1 · answered Oct 15 '20 at 06:45

0

Can be achieved using - slideToggle() of jquery as below -

$("#pop").click(function(){ $("#popdiv").slideToggle(1000);

});

answered Oct 15 '20 at 06:45

codeBug 07

73
7

score 0 · Answer 2 · answered Oct 15 '20 at 06:55

Don't use the toggle() function. It will only give you control over when it should show and hide, but not how.

Instead use a combination of JavaScript and CSS. The display property cannot be animated and therefor should not be used if you want to create a transition.

Instead use a combination of the opacity, visibility and transition properties in CSS. As a default state the opacity should be 0, visiblity should be hidden and the element should have a transition set on both these elements.

Now define a CSS class which has opacity set to 1 and the visibility property set to visible. This will be the state in which your element is visible.

Then use JavaScript, and with jQuery in your case, to toggle the class on the element that you want to show or hide. This can be done with the toggleClass() method.

$('#pop').click(function(){

    $('#popdiv').toggleClass('show');

})

#popdiv {
  opacity: 0;
  visibility: hidden;
  transition: 500ms ease-in-out;
  transition-property: opacity, visibility;
}

#popdiv.show {
  opacity: 1;
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color: aqua; width: 50%; height: 20%;" >
    <button id="pop">CLICK</button>
</div>
<div style="background-color: cadetblue; width: 30%; height: 40%;" id="popdiv">
        POPUP
</div>

score 0 · Answer 3 · answered Oct 15 '20 at 07:01

You can add animation by using .animate

Here is the document I am referring to for this: https://www.w3schools.com/jquery/jquery_animate.asp

For your code, I removed the external CSS, updated your jQuery, and added display: none to your popup div.

$('#pop').click(function(){
    $('#popdiv').animate({
        width: 'toggle'
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color: aqua; width: 50%; height: 20%;" >
    <button id="pop">CLICK</button>
</div>
<div style="background-color: cadetblue; width: 30%; height: 40%; display: none;" id="popdiv">
        POPUP
</div>

score 0 · Answer 4 · answered Oct 15 '20 at 07:08

other options: you can change the fadeIn numbers and the transition of .5s.

$('#pop').click(function(){
    $('#popdiv').fadeIn(1000); 
})

$('#pop2').click(function(){
   $('#popdiv2').toggleClass('showHide');
})

#popdiv{
   display:none;
}

#popdiv2 {
  opacity: 0;
  transition: all .5s ease-in-out;
}
#popdiv2.showHide {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color: aqua; width: 50%; height: 20%;" >
        <button id="pop">CLICK</button>
    </div>
    <div style="background-color: cadetblue; width: 30%; height: 40%;" id="popdiv">
        POPUP
    </div>
<br><br><br>
<div style="background-color: aqua; width: 50%; height: 20%;" >
        <button id="pop2">CLICK TWO</button>
    </div>
    <div style="background-color: cadetblue; width: 30%; height: 40%;" id="popdiv2">
        POPUP TWO
    </div>

Apply css transition on showing and hiding div

4 Answers4