Many neat effects are achieved by manipulating CSS properties in reaction to an event; for example, the showing or hiding an element. There are two different CSS properties: display or visibility control whether or not an element appears on the page. Setting display to none or visibility to hidden hides an element. The converse is to set display to block or visibility to visible.
While both “hide” an element, it should be pointed out that each method has a very different effect on the flow of the page. Elements with their visibility set to hidden remain firmly within the flow of the document. Elements that follow a hidden element in the document will retain their original offset. Elements with their display property set to none, on the other hand, are completely pulled out of the flow of the document.
$(“div#message”).click(function(){
$(this).css(“display”, “none”);
});
And to show the image:
$(“div#message”).ready(function(){
$(this).css(“display”, “block”);
});
A better approach is to use jQuery’s $.hide() and $.show() methods. In the next example, the page displays a message box at the top. Upon clicking the div it disappears, and on clicking the container the message appears again.
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
#message {
position: absolute;
left:0;
top:0;
width:100%;
height:20px;
background-color:orange;
}
#container {
position:absolute;
left:0;
top:0;
width:100%;
height:500px;
}
</style>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(“#message”).click(function(e){
e.stopPropagation();
$(this).hide();
});
$(document).click(function(){
$(“#message”).show();
});
});
</script>
</head>
<body>
<div id=”message”>
Fill out our annoying survey! (click to dismiss)
</div>
</body>
Code snippet is from showhide.txt
Stack overflow and Twitter both have a really neat feature where messages are displayed at the top, in a similar fashion to the previous example, except for one big difference; the message box slides in. jQuery has both $.slideDown() and $.slideUp() methods for translating divs in/out of a page. Each has the following syntax:
$(selector).slideUp([speed,] [easing,] [callback]);
$(selector).slideDown([speed,] [easing,] [callback]);
All three arguments are optional. The speed, or duration of the animation, can be indicated as either a number (representing milliseconds) or as a string ‘fast’ or ’slow’. A ’fast’ animation is 200 milliseconds whereas a ’slow’ animation is 600 milliseconds. If the speed (aka duration) is omitted, the default speed is 400 milliseconds. Both $.slideUp() and $.slideDown() accept a callback function, which is executed once the $.slideUp() or $.slideDown() function has finished executing.
You can also include an optional easing argument, which dictates how fast the animation runs at different time points. The only defaults included at the time of this writing are linear and swing. But, there’s a neat easing plugin with a variety of different easing options. Check it out at http://james.padolsey.com/demos/jquery/easing/. More easing functions are also included with jQuery UI.
The following example improves on the previous message box by using both $.slideUp() and $.slideDown() instead of $.show() and $.hide():
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
div {
text-align: center;
color: white;
font-size: xx-large;
position: absolute;
left:0;
top:0;
width:100%;
height:50px;
background-color:orange;
}
</style>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(“div#message”).click(function(e){
e.stopPropagation();
$(“div#message”).slideUp(’fast’);
});
$(document).click(function(){
$(“div#message”).slideDown(’fast’);
});
});
</script>
</head>
<body>
<div id=”message”>
Fill out our annoying survey! (click to dismiss)
</div>
</body>
</html>
Code snippet is from slideup-slidedown.txt
Another slick effect provided by jQuery is fading. More specifically, $.fadeIn() and $.fadeOut(). The syntax for the fade functions is almost identical to the slide functions, with the same concepts applying to speed, easing, and an optional callback function.
$(selector).fadeIn([speed,] [easing,] [callback]);
$(selector).fadeOut([speed,] [easing,] [callback]);
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc