Adding Visual Effects Using jQuery

Adding Visual Effects Using jQuery


With the help of jQuery, amazing visual effects can be applied to the elements of a Web document. These visual effects help to enrich the browsing experience of a user. Some of the predefined jQuery effects that can be used to add visual appeal to a Web page are:

  • Hide
  • Show
  • Toggle
  • Slide
  • Fade
  • Animate
Implementing Hide Effect

The hide() function is used to make an element disappear when an event, such as click or double-click occurs.

The following syntax is used to hide the selected elements:

$(selector).hide(speed)

In the predefined syntax, speed is an optional parameter that denotes speed with the values, slow, normal, and fast , or the duration in milliseconds at which an elements disappears .

Consider the following code to implement the hide effects:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="jquery-1.8.3.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("button").click(function){
$("h1).hide("slow");
});
});
</SCRIPT>
</HEAD>
<BODY>
<H1> I am the Header</H1>
<BUTTON> Hide the Header</BUTTON>
</BODY>
</HTML>


In the preceding code, the text I am the Header, is displayed above Hide the Header button. When the Hide the Header button is clicked , the text I am the Header slowly disappears  from the browser window.



Implementing Show Effect

The show() function is used to make  a hidden element  visible when an event occurs. The following syntax is used to show the selected elements , if they are already hidden:

$(selector).show(speed)

In the preceding syntax, speed is an optional parameter. This parameter is used to specify the speed with the values , slow , normal and fast or the duration in milliseconds at which an elements reappears.

Consider the following code snippet to implement  the show effect:

<!DOCTYPE HTML>
<HTML>
<HEAD><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>

<SCRIPT type="text/javascript" src="jquery-1.8.3.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$(".view").click (function(){
$("h3").show(2000);
});
$(".conceal").click(function(){
$("h3").hide();
});
});
</SCRIPT>
</HEAD>
<BODY>
<H3> This text can be hidden and shown</H3><BR>
<BUTTON class="view">Click the view</BUTTON>
<BUTTON class="conceal">Click to hide</BUTTON>
</BODY>
</HTML>

In the preceding code snippet, the <H3> tag gets hidden in the browser window when the Click the hide button  is clicked. When the Click to view button is clicked, the <H3> tag  is shown again in 2000 milliseconds ( or 2 seconds).

Implementing Toggle Effect

The toggle function() can be used to switch between the  show and hide effects  of an element. This event can be used to show and hide the element, alternatively, when an event occurs.

The following syntax is used to show or hide the selected elements:

$(selector).toggle(speed)


In the preceding syntax, speed is an optional parameter. It is used to specify the speed  with the values , slow, normal and fast , or the duration in milliseconds at which an element disappears and reappears.

Consider the following code snippet to implement the toggle effect:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="jquery-1.8.3.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$(".view").click(function){
$("h3").toggle('fast');
});
});
</SCRIPT>
</HEAD>
<BODY>
<H3> Show and Hide me quickly</H3>
<HR>
<BUTTON class="view">Click here</BUTTON>
</BODY>
</HTML>

In the preceding code snippet , the toggle() function hide and show the <H3> tags,  alternately.









About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment