JQuery Effects

From CoderLearner
Jump to: navigation, search

Description

In JQuery Effects can be very powerful to manipulate the page content.

hide and show effects

  • #div1 will display or hide according to the mouse click on the button.
<!DOCTYPE html>
<html>
   <head>
      <title>Btn</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(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>

Try It

$(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>

Try It

$(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>

Try It

$(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>

Try It

fade

<!DOCTYPE html>
<html>
   <head>
      <title>Btn</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(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 official who helped usher in the sport's modern era. 
            A champion and bonafide star driver for more than two decades.

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

      <button>Show</button>

   </body>
</html>

Try It

$(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)

<!DOCTYPE html>
<html>
   <head>
      <title>Btn</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(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>

Try It

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>