Now here in this tutorial, I’ll explain the CSS3 Transition: fadeIn and fadeOut like effects by and shows you how to control and do smooth transitions to show/hide HTML Elements.
In my previous tutorials, I’d explained jQuery fadeIn and fadeOut effect in asp.net, most popular fading effects, validate dropdownlist using javascript and other more cracking tutorials on Asp.net, JavaScript, jQuery, GridView here.
CSS3 transitions are the easiest way to animate HTML elements. CSS is used to control how web pages appear and shifts from one set of style sheets to another ordinarily occur abruptly.
We can show/hide any html elements by giving same effects as jQuery fadeIn and fadeOut by using the css3 `transition-delay` property, and apply a different delay to the opacity transition (no delay) and to the visibility transition (delay equal to the duration of the opacity transition). Adding CSS3 transition properties allows most of those changes to occur gradually, for a more vibrant, fluid interface to an HTML Elements.
fadeIn And fadeOut Like Effects – [.aspx]
Following is the complete HTML Markup code that I used for the demonstration:
<head>
<title>Fade In and Fade Out effect Using CSS3 Transition</title>
<style type=”text/css”>
/* Fade-In Effect */
.visible
{
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
/* Fade-Out Effect */
.hidden
{
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
#wrapper > div
{
background: none repeat scroll 0 0 #f5f;
border: 5px solid #808080;
border-radius: 50px;
padding: 10px;
width: 250px;
}
</style>
</head>
<body>
<div id=”wrapper”>
<p>
<button type=”button”>Show HTML Element</button>
<button type=”button”>Hide HTML Element</button>
</p>
<br />
<div class=”hidden”>
AspnetO – Quick Way To Learn Asp.net
</div>
</div>
<script type=”text/javascript”>
//Add query Selector
var showButtonClick = document.querySelector(“#wrapper button:nth-of-type(1)”),
hideButtonClick = document.querySelector(“#wrapper button:nth-of-type(2)”),
content = document.querySelector(“#wrapper > div”);//Show wrapper div content
showButtonClick.addEventListener(“click”, function () {
content.className = “visible”;
}, false);//Hide wrapper div content
hideButtonClick.addEventListener(“click”, function () {
content.className = “hidden”;
}, false);
</script>
</body>
</html>
can you post a demo of how you would use generic text links to achieve the effect? like “show” and “hide” text links (rather than buttons). thanks
You can try tooltip example from https://www.aspneto.com/tooltip-example-show-hide-hint-help-text-using-css3-transition.html
unfortunately i need a “click” effect, not a hover. any way to adapt the tooltip example? thanks!!
You can use jQuery click event to achieve this. I’ve updated the post with the same link given in above reply. You can go check that link again!