Jump to: navigation, search

JQuery Effects

From w3cyberlearnings

Contents

hide and show effects

  • #div1 will display or hide according to the mouse click on the button. 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>User Profile List</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {
				// hide all form first when page load
				$('#div1').hide();
				// show
				$('#btn_show').click(function(){
					$('#div1').show();
				});
				// hide
				$('#btn_hide').click(function(){
					$('#div1').hide();
				});
				
			});
		</script>
	</head>
	<body>
		<button id="btn_show">Show</button>
		<button id="btn_hide">Hide</button>

		<div id="div1">
			<h3>Effects in action by w3cyberlearnings.com</h3>
		</div>

	</body>
</html>

$(selector).show(speed,call-back)

$('#btn_show').click(function(){
	$('#div1').show(1000,function(){
              alert('Show()');
        });
});

$(selector).hide(speed,call-back)

  • After the hide method completed, the call-back function execute. 
$('#btn_hide').click(function(){
	$('#div1').hide(1000,function(){
              alert('Hide()');
        });
});

toggle

  • $(select).toggle() method toggles the visibility of HTML elements using the hide() or show() methods. 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>User Profile List</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {
				// hide all form first when page load
				$('#div1').hide();
				$('#mybtn').click(function(){
					$('#div1').toggle();
					
				});
			});
		</script>
	</head>
	<body>
		<button id="mybtn">Show</button>
		<div id="div1">
			<h3>Effects in action by w3cyberlearnings.com</h3>
		</div>

	</body>
</html>

$(selector).toggle() methods contains speed and call-back parameter

  • The speed can be written in letter: slow, fast, normal, milliseconds.
  • The call-back function is optional.

$(selector).toggle(speed,call-back)

$('#mybtn').click(function(){
	$('#div1').toggle(1000,function(){
              alert('Ohhh');
        });
});

$(selector).slideDown(speed,callback)

  • slideDown() graduation change the height of the HTML element and move downward. 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>User Profile List</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {
				$('div#content').hide();
				$('button').click(function(){
					$('div#content').slideDown("slow");
				});
			});
		</script>
	</head>
	<body>

		<div id="content">
			<h3>Last news</h3>
			<p>
				A woman goes to fish, and find out his husband was gone.
				She thinks about whereabout of her husband. About two she
				sees her husband friends at the sea site waiting fishermen. 
				All the situation nothing is too secret when her husbands bring
				a big bag of fish. 
			</p>
		</div>

		<button>Show</button>

	</body>
</html>

$(selector).slideDown(speed,callback)

$('div#content').hide();
	$('button').click(function(){
	$('div#content').slideDown("slow",function(){
               alert('all down');
        });
});

$(selector).slideUp(speed,callback)

  • $.slideUp() is the opposite of $.slideDown().

$(selector).slideToggle(speed,callback)

  • $.slideToggle() is slide toggle and the visibility of HTML element uses $.slideUp or $.slideDown. 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>User Profile List</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {
				$('div#content').hide();
				$('button').click(function(){
					$('div#content').slideToggle("slow");
				});
			});
		</script>
	</head>
	<body>

		<div id="content">
			<h3>Last news</h3>
			<p>
				A woman goes to fish, and find out his husband was gone.
				She thinks about whereabout of her husband. About two she
				sees her husband friends at the sea site waiting fishermen. 
				All the situation nothing is too secret when her husbands bring
				a big bag of fish. 
			</p>
		</div>

		<button>Show</button>

	</body>
</html>

fade

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Fade</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" language="javascript">
			$(document).ready(function() {
				$('div#content').hide();
				$('button').click(function(){
					$('div#content').fadeIn("slow");
				});
			});
	</script>
</head>
<body>

	<div id="content">
	<h3>Last news</h3>
	<p>
	    A legendary engine builder and car owner. 
	    The matriarch of a sport. A trail blazer who broke NASCAR's color barrier. 
            An influential sponsorship official who helped usher in the sport's modern era. 
            A champion and bonafide star driver for more than two decades.

            For such a wide-ranging array of people, all have two things in common: 
            their impact on stock-car racing and their addition to the list of nominees
            for the NASCAR Hall of Fame's Class of 2013.
	</p>
	</div>

	<button>Show</button>

</body>
</html>

$(selector).fadeIn(speed,callback)

$('button').click(function(){
	$('div#content').fadeIn("slow",function(){
                  alert('fadein');
        });
});

$(selector).fadeOut()

$(document).ready(function() {
	$('button').click(function(){
		$('div#content').fadeOut("slow");
	});
});

$(selector).fadeOut(speed,callback)

$(document).ready(function() {
	$('button').click(function(){
		$('div#content').fadeOut("slow",function(){
                       alert('fadeout');
                });
	});
});

$(selector).fadeTo(speed,opacity)

$(document).ready(function() {
	$('button').click(function(){
		$('div#content').fadeTo("slow",0.5);
	});
});

$(selector).fadeTo(speed,opacity,callback)

$(document).ready(function() {
	$('button').click(function(){
		$('div#content').fadeTo("slow",0.5,function(){
                    alert('fadeTo');
                });
	});
});

$(selector).animate( properties, duration, easing,callback)

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Animate Example</title>
	<script type="text/javascript" src="hjquery.min.js"></script>
	<style>
			#content {
				background-color:grey;
				width:80px;
				height:80px;
				font-size: 18px;
			}
	</style>
	<script type="text/javascript" language="javascript">
		$(document).ready(function() {
		  	
			$('button').click(function(){
				$('div#content').animate({height:180},"slow");
				$('div#content').animate({width:180},"slow");
					
				$('div#content').animate({height:80},"slow");
				$('div#content').animate({width:80},"slow");
					
			});
		});
	</script>
	</head>
	<body>

	<div id="content">
		<p>Animate Test</p>
	</div>

	<button>Show</button>

	</body>
</html>

Related Links

Retrieved from "http://www.w3cyberlearnings.com/index.php?title=JQuery_Effects&oldid=5816"
Navigation
Web
SQL
MISC
References
Personal tools
Namespaces
Variants
Actions