Slide out and drawer effect. The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks.
The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ‘section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area. This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin. Markup Since we’re practising unobtrusive JavaScript, the markup will start with headings separating the list items. There’s two approaches depending on your content. Slide Demo - Fixed Drawer. 49 praktycznych tutoriali jQuery, które ożywią Twoją stronę. Image Cross Fade Transition.
In particular, Nathan Wrigley of pictureandword.com, needed a method one image into another mouse rolls over, and the slowly fade back once the mouse has left.
Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript: $(function () { $('img.swap').hover(function () { this.src = 'images/sad.jpg'; }, function () { this.src = 'images/happy.jpg'; }); }); Fade Method 2 (single image) Fade Method 2 - Single Image Technique This technique uses jQuery to modify the markup and to animate to fade transition.
Menu Fader from CSS-Tricks. Learning jQuery: Fading Menu - Replacing Content. Update January 2013: Best practice for this kind of this is detailed here.
Update May 2010: I'm considering this article deprecated. I have an updated article here, which covers this same type of material only with more features, updated technology, and better practices. The more I learn about jQuery, the more natural it feels. Image Fade Revisited. Image Fade Revisited. Watch the image fade revisited screencast (alternative flash version) QuickTime version is approximately 30Mb, flash version is streaming.
View the demo and source code used in the screencast Also a side note about IE6 support: Side note: IE6 screencast (alternative flash version) Understanding the Problem. Jquery for beginners. jQuery Fundamentals. The jQuery library makes it easy to manipulate a page of HTML after it's displayed by the browser.
It also provides tools that help you listen for a user to interact with your page, tools that help you create animations in your page, and tools that let you communicate with a server without reloading the page. We'll get to those in a bit. First, let's look at some jQuery basics, and at how we can use jQuery to perform its core functionality: getting some elements and doing something with them. This guide assumes that you understand HTML and CSS Selectors. If you are not familiar with how you can use CSS selectors to target elements, you should spend some time getting up to speed before trying to work through this guide. What’s $, anyway?
The jQuery library provides the jQuery function, which lets you select elements using CSS selectors. Responsive jQuery Slider. Responsive jQuery Slider. Responsive jQuery Slider. Because everyone has questions.
What is this "jQuery" you speak of? jQuery is the most popular Javascript framework used today. It is used mostly for DOM manipulation (animating divs, changing dimensions, calculating positioning, etc..). However, it can be used for much more than that, such as AJAX, form validation, etc.. Almost every project in which I have played a role has used jQuery.
Nothing is working. Here is a list of things to check that should solve most "not working" problems: Is the jQuery library included in the <head> of the document? FullPage.js jQuery Plugin for fullscreen scrolling websites. Nowadays is very common to find fullscreen websites as it was in the past in the age of flash, but now, with the power of HTML, CSS and Javascript.
Some examples: I had to do one of this websites and I found out there was nothing in the jQuery plugins world to make this task easier. In an attempt to create something to make things easier for other people trying to do the same, I’ve created a simple plugin which creates the basic structure and functionality to start making a fullscreen scrolling website, also known as single page website. I’ve named it fullPage.js and It is available at my github account.
It’s in the first version and I hope to keep improving it with the time. And all of this being compatible with old browsers such as Internet Explorer 8, 9, Opera 12 etc which already still being used by many users nowadays. Creating a full scrolling website The structure is quite simple, adding a `section` class for each section of the site, and `slide` for each slide within a section: Examples - jCarousel. Responsive Carousel - jCarousel Examples. FullPage.js One Page Scroll Sites. Alvarotrigo/fullPage.js.