Si I have a simple few lines of code, basically what it does is when you click on the div that has the id, it disappear (display :none). Normally I would do an addClass / removeClass but I was wondering if just with this code I could add an effect that doesn't make the div brutally disappear but maybe with a transition to the left or the top with 0.8 seconds. How would you proceed?
window.onload = function(){
var divToHide = document.getElementById('divToHide');
document.onclick = function(e){
divToHide.style.display = 'none';
}
};
If you want to use jquery, you can use slide methods of the same. Constraint is that you will have to use jquery.
$("#divToHide").slideDown(2000); //2000 is the ms for the effect
However you can also apply transition-timing-function in css. If you keep the transition-timing-function: linear and go from width 100% to zero width, it will have the effect of sliding and from to to bottom, transition on height.. https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function