jQuery Fade Toggle


jQuery Examples

Using the HTML Box to create jQuery Examples .


Fade Toggle a HTML Element


Using the jQuery JavaScript API in the HTML Box you can Fade Toggle HTML elements within Google Sites.

Toggle the Opacity on and off.

 jQuery Method

fadeToggle();


The jQuery Fade Toggle Method is similar to other toggle methods. 

Using the fade toggle method you do not have to define the CSS class for Opacity percentage  of the HTML element.

An Example of the Fade Toggle jQuery Method


[Note: Autosize of the HTML Box]





Google APi Library - jQuery Version1.6

http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js

HTML Box Example Code:

Copy and paste the code below and Insert > HTML Box in your Google Sites webpage.

jQuery Method
Content to Fade Toggle 
jQuery ID Selector

<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js "></script>
  
<button>FadeToggle</button>

<div id="fade_toggle" ><img src="https://chart.googleapis.com/chart?chst=d_simple_text_icon_left&amp;chld=jQuery%7C14%7Cf30%7Cstar%7C24%7Cf30%7Cfff"></div>

<script>
$("button").click(function() {
  $("#fade_toggle").fadeToggle("slow", "linear");
});

</script>