jQuery is a coding language, which works like JavaScript. This light weight JavaScript library is very easy to use and has features which helps you work in a better, quick and more efficient way. The best jQuery effects are its drop down menus, drag and drop elements, animations and form validation. You do not need to use Flash now for animation it can simply be done by jQuery now. jQuery is also connected with other coding language. You just need to download the package and install library scripts!!
For all those who are new to jQuery and do not know much about it can easily be benefited by my today’s post….I have compiled a list of 30+ jQuery tutorials for you. Take a look!!
1- How to Create a Simple iTunes like Slider
Developers often seek the functionality provided by sliders in order to fit lots of information in the space provided. But creating such a slider is not as difficult as you might think. With a little planning and some experimenting, you can create one rather quickly.
2- How to Create an Infinite Scrolling Web Gallery
When working my way through a web gallery, I find it annoying when I must change pages; so in today’s tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX. Let’s get started!
3- Create a unique Gallery by using z-index and jQuery
In this tutorial we want to create a unique picture gallery utilizing the CSS. In our example we have the appearance of a pile of pictures, on the next action we put the first picture on the last position and on the previous action we get the picture from the last position to the first. All done just by altering the z-index, of course with a animation to underline the imagination to have a pile of pictures.
4- Create a Custom jQuery Image Gallery with jCarousel
Alright fellow web designers and developers. We are going to do something a little bit more hardcore this time. There are heaps of jQuery plugins out there, but it’s hard to find something that suit us. So, this tutorial will teach you how to be creative and create a customize plugin.
If you have read this post – Single Page Websites With Creative Javascript Effects. You will able to see that, it’s quite a popular trend that most of the designers showcase theirs work by using a vertical horizontal carousel. So, in this tutorial, we will learn how to build an unique jQuery script by modifying other plugin – create a Image gallery with jCarousel. A picture tells thousand words, we are going to transform jCarousel to this:
5- How to Make a Smooth Animated Menu with jQuery
The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.
View Tutorial
6- How to Load In and Animate Content with jQuery
In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.
7- WordPress Sidebar Turned Apple Flashy Using jQuery
This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to. If you want to run a local server on your computer with a wordpress installation,
8- Making an Interactive Picture with jQuery
In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect of a photo (ie items or people).
View Tutorial
9- Animate Curtains Opening with jQuery
This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them.
View Tutorial
10- JQuery For Absolute Beginners
This tutorial is a complete source for JQuery For Absolute Beginners.
View Tutorial
11- Building a jQuery Powered Tag Cloud
A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud. Aside from the actual links themselves, which give people an idea of the subjects that your site covers, they can also show how popular the different subjects are. Another great thing about tag-clouds is that they can be used to describe the frequency of anything; you can link to articles, blog posts, images, video, or anything else that you have in abundance on your site.
12- Exactly How to Create a Custom jQuery Accordion
Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, I’ll show you how to build a custom accordion that is more “bandwidth efficient”.
13- “Outside the Box” Navigation with jQuery
Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
14- Create an Image Rotator with Description jQuery
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
15- Learn How to Create a jQuery Plugin
You might think to yourself, “What is all the fuss with jQuery? You have to download a bunch of plugins to even make the library worth while.”. First, that isn’t true. Second, the jQuery library was specifically designed for that very purpose. By keeping the core library as small as possible – about 16 kb – users can then apply additional plugins at their own discretion. Today, I’ll teach you how to build your first “Center” plugin from scratch. Let’s get started!
16- Creating a Dynamic Poll with jQuery and PHP
When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.
17- Leopard Desktop with jQuery using jqDock
jQuery adds a whole lot of cool functionality to your websites. It can do a range of things, from animation to AJAX. It’s usually frowned upon to rely heavily on jQuery to design your sites, but it’s fun to go wild every now and then. In this tutorial I’ll teach you how to use jQuery to create a completely coded Dashboard, just like Leopard! This can be handy in hiding a whole lot of gadgets or widgets you don’t have space for!
18- How To Create An Amazing jQuery Style Switcher
In this tutorial I will be showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.
19- Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Tutorial
20- Use Sprites to Create an Awesomeness Filled Navigation Menu
CSS sprites can dramatically increase a website’s performance, and with jQuery, we can implement awesome transition effects easily. Let’s get started.
21- Create Portfolio Website With jQuery
Since last some weeks i have started learning jQuery, and today i thought why not give a tutorial on jquery and css. So i come up with this amazing tutorial (amazing for me atleast), which uses only pure CSS and jQuery to design a whole portfolio website suited for any shared hosting, no photoshop or any other design software required. Here we go…
View Tutorial
22- Jquery Fade In/Fade Out
This tutorial il show you some simple effects you can use to spice up your websites using jquery. Your probably thinking oh no not another coding language ive got to learn.
23- Create an Amazon Books Widget with jQuery
This tutorial is using the minified jQuery 1.2.6 core JavaScript file, which can be downloaded here from Google Code. No other plugins are necessary. Here is a screenshot of the widget in its final form.
24- Sliding Panel Photo Wall Gallery with jQuery
Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.
25- jQuery Tabs
For this tutorial I have created two screencasts demonstrating how to quickly apply a dash of jQuery to different layouts of markup, which, if the markup is well designed, it will automatically degrade nicely without JavaScript enabled. In a future article we will cover default browser functionality (i.e. supporting back, forward and bookmark buttons) and saving tab states.
26- jQuery Infinite Carousel
With jQuery for Designer’s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk through the fundamentals of the effect and how to recreate it.
27- Pretty Simple Content Slider with jQuery
Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.
28- Scrollable Thumbs Menu with jQuery
In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item. The thumbs are scrollable by moving the mouse up and down which makes a really nice effect. We will add some CSS3 properties for spicing up the looks.
29- Animate Panning Slideshow with jQuery
In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.
View Tutorial
30- Color Fading Menu with jQuery
When I first pushed out this latest redesign for CSS-Tricks, it featured a simple color fading animation in the main navigation. Liam quickly noticed a flaw in the code I was using to do it, where if you very quickly moused back and forth over the menu items some of the transitional color would “stick”. Liam generously rewrote the code to be a bit smarter for me, and I asked him to write this tutorial.
31- Create an apple style menu and improve it jQuery
Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.
