Implementing fade and animate effect

Implementing Fade Effect


A jQuery fade effect is used to gradually reduce the opacity of the selected elements. You can fade a HTML element in and out of visibility. 

...................................................................................................................................................................
Function
fadeOut()

Description
Is used to fade the appearance of the selected elements.

Syntax 
$(selector).fadeOut(speed)

...................................................................................................................................................................Function
fadeIn()

Description
Is used to restore the appearance of the faded, selected element.

Syntax
$(selector).fadeIn(speed)

...................................................................................................................................................................Function
fadeTo()

Description
Is used to specify the opacity for fading the selected element

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

...................................................................................................................................................................
Function
fadeToggle()

Description
Is used to fade the appearance of the selected elements, when they are faded out, and restore the appearance of the selected elements, when they are faded in.

Syntax
$(selector).fadeToggle(speed)

..................................................................................................................................................................

Consider the following code to implement the fade 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(){
$("div").click(function(){
$(this).fadeOut(1200);
});
$("button").click(function(){
$(this).fadeIn(1200);
});
});
</SCRIPT>
</HEAD>
<BODY>
<DIV style="background:yellow;width:200px">FADE ME AWAY!</DIV><BR>
<BUTTON>Restore</BUTTON>
</BODY>
</HTML>

In the preceding code, div tag is  referred by using its name . In the click event handler of the div tag., the this keyword referred to the current HTML elements, that is, the div tag.  When the user click on the div tag, the text FADE ME AWAY! fades away. When the Restore button is clicked,  the text, FADE ME AWAY! reappears.



Implementing Animate Effect

The jQuery animate effect used to create custom animations.You can create an animate function  by using the following syntax:

animate({param}),speed , callback);
where,
param specifies the CSS properties to be animated.
speed specifies the duration of the animation effect.
callback specifies the function that  will be executed after  completing the animation. It is the optional parameter.

Consider the following code snippet for applying animation effect  on the <DIV> element:

<!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 src="jquery-1.8.3.js">
</SCRIPT>
<SCRIPT>
$(document).ready(function(){
$("div").mouseenter(function(){
$("div").animate({
center:' 250px',
opacity: '0.5',
height: '250px',
width: '250px',
});
});
$("div").mouseleave(function(){
$("div").animate({
opacity: '1',
height: '100px',
width: '100px',
});
});
});
</SCRIPT>
</HEAD>
<BODY>
<DIV style="background:#98bf21;height:100px;width:100px;position:absolute;">
</DIV>
</BODY>
</HTML>

The preceding code will increase the size of the <DIV> element according to its specify width and height  when the mouse is moved over it and will reduce the size of the <DIV> element according to its specify width and height  when  the mouse is left over it.


                                                               Colortbox

Consider the following code to create a lightbox by specifying the height and width of the frame in which the image is displayed:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<LINK media="screen"  rel="stylesheet" href="CSS/colorbox.css" />
<SCRIPT src="jQueryS/jquery-1.8.3.js"></SCRIPT>
<SCRIPT src="jQueryS/jquery.colorbox.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("a").colorbox({transition:"fade", height: "250", width: "220});
});
</SCRIPT>
</HEAD>
<BODY>
<H1>Product Demonstration</H1>
<A href="contentFiles/Product2.png">Laptops</A>
</BODY>
</HTML>



Implementing Toggle Effect

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

The following syntax is used to show or hide the selected elements:
       $(selector).toggle(speed)

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>

About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment