JQUERY DEMO SITE

 

 

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

 

These are examples of sliding, opacity and rollover using jquery


To start attach scripts.js and the jquery file in the head of your page. The first and the third are sliding examples. All four of the divs you make in your html code correspondes to the css and the jquery in the line directly after the opening $(function(){ line. The two slide and opacity examples have jquery that start with $(function(){ and end with a closing bracket of }); with the exception of the swap image which is placed after the closing bracket for opacity function.

 


To see jquery click here: css click here: html click here:

 

 

these are examples of fading scroll and tabs using jquery

 

To make the fading scrolling happen is very simple. Below is the html, css and jquery to input then you use the scroll bar and see how it works:

html: <div>Try scrolling the iframe.</div> <p>Paragraph - <span>Scroll happened!</span></p>

css: <style> div { color:blue; } p { color:green; } span { color:red; display:none; } </style>

jquery: $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $(window).scroll(function () { $("span").css("display", "inline").fadeOut("slow"); });

 

TRY SCROLLING THE WEBSITE

 

Paragraph - Scroll happened!

 

Paragraph - Scroll happened!

 

Paragraph - Scroll happened!

 

Paragraph - Scroll happened!

 

Paragraph - Scroll happened!

 

Paragraph - Scroll happened!

 

Paragraph - Scroll happened!

 

Paragraph - Scroll happened!

 

Tab 1

Below find the html, css and jquery to build this tab:

 

To see html click here:

 

To see css click here: To see jquery click here:

 

Tab 2

This is content in tab 2

Tab 3

This is content in tab 3

Tab 4

This is content in tab 4