.show()
In this chapter you will learn:
- Syntax and Description for .show() methods
- Show hidden div tags
- Click to show
- Show fast
- Show hidden fast
- Show hidden slow
- Show in millisecond
- Show normal
- Pass arguments.callee to show callback function
- Div based Dialog
Syntax and Description
.show([duration][, callback])
displays the matched elements.
duration (optional)A string or number determining how long the animation will runcallback (optional)A function to call once the animation is complete
Its return value is the jQuery object, for chaining purposes.
With no parameters, the .show() method displays an element.
$('.target').show();
Durations are given in milliseconds; higher values indicate slower animations.
The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.
If supplied, the callback is fired once the animation is complete.
We can animate any element, such as a simple image:
Show hidden div tags
<html><!-- j a v a2s .com-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:hidden").show(3000);
});
</script>
</head>
<body>
<body>
<span></span>
<div style="display:none;">Hider! java2s.com</div>
<div></div>
</body>
</html>
Click to show
<!DOCTYPE html><!-- j a va 2s . c om-->
<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://java2s.com/style/jquery-1.8.0.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">This is a message.</div>
</body>
</html>
Show fast
<html><!--from j a v a2s. com-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").show("fast")
});
</script>
</head>
<body>
<body>
<p style="display:none">Hello! java2s.com</p>
</body>
</html>
Show hidden fast
<html><!--from j a v a 2 s.c o m-->
<head>
<style>
div { width:50px; height:40px; margin: 5px; float:left;background:red; }
</style>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("div:hidden").show("fast");
});
});
</script>
</head>
<body>
<button>Show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
</body>
</html>
Show hidden slow
<html><!--from j a v a2 s.co m-->
<head>
<style>
div { width:50px; height:40px; margin: 5px; float:left;background:red; }
</style>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("div:hidden").show("slow");
});
});
</script>
</head>
<body>
<button>Show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
</body>
</html>
Show in millisecond
<html><!--from ja va 2 s . c om-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").show(2000)
});
</script>
</head>
<body>
<body>
<p style="display:none">Hello! java2s.com</p>
</body>
</html>
Show normal
<html><!--from java 2s . co m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").show("normal")
});
</script>
</head>
<body>
<body>
<p style="display:none">Hello. java2s.com</p>
</body>
</html>
Pass arguments.callee to show callback function
<html><!-- j a v a2 s. c om-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#showHandler").click(function () {
$("div:eq(0)").show("fast", function () {
$(this).next().show("fast", arguments.callee);
});
});
$("#hideHandler").click(function () {
$("div").hide(2000);
});
});
</script>
</head>
<body>
<body>
<button id="showHandler">Show</button>
<button id="hideHandler">Hide</button>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D java2s.com</div>
</body>
</html>
Div based Dialog
<html><!-- ja va 2 s . c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js">
</script>
<script type='text/javascript'>
$(document).ready(
function() {
$('input#tmpOpen').click(
function($e) {
$('div#myDialog').show(5000);
}
);
$('input#tmpClose').click(
function($e) {
$('div#myDialog').hide(5000);
}
);
}
);
</script>
<style type='text/css'>
div#myDialog {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 200px;
margin: -101px 0 0 -251px;
border: 1px solid rgb(128, 128, 128);
}
div#tmpButtons {
position: absolute;
bottom: 5px;
right: 5px;
}
</style>
</head>
<body>
<input type='submit' id='tmpOpen' value='Open' />
<div id='myDialog'>
<p>
Dialog content
</p>
<div id='tmpButtons'>
<input type='submit' id='tmpClose' value='Close' />
</div>
</div>
</body>
</html>
Next chapter...
What you will learn in the next chapter:
- Syntax and Description for .slideDown()
- Slide down a paragraph
- slideDown and slideUp
- Hide and Slide down
- Slide down and set focus
- Slide down fast
- Slide down slowly
- Slide down form fields
- Slide down in milliseconds
- Slide to show paragraph
- Animate height