Fade transition plugin for jQuery
May 25th, 2009Update
After requests from Juanma and Manic, below is a modified version of the plugin which demonstrates custom navigation:
All source code is completed untested on any browser except FF3.5, and comes without warranty of any kind. Source code is contained within this file
I’ve been a huge fan of jQuery for a few years now, and it is incorporated in most of my online projects. I’ve never created a plugin for jQuery though, so I thought that maybe I should try my hand at it. My attempt builds on some code I wrote quite a while ago to transition a sequence of images (or any HTML elements, for that matter) by fading out one image, and fading in another. There are plenty of other plugins which achieve the same effect (and are probably better), but feel free to experiment with this one.
There’s really not much source code to this plugin:
(function ($) {
$.fn.fadeTransition = function(options) {
var options = $.extend({pauseTime: 5000, transitionTime: 2000, ignore: null, delayStart: 0, pauseNavigation: false}, options);
var transitionObject;
Trans = function(obj) {
var timer = null;
var current = 0;
var els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
$(obj).css("position", "relative");
els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
if (options.delayStart > 0) {
setTimeout(showFirst, options.delayStart);
}
else
showFirst();
function showFirst() {
if (options.ignore) {
$(options.ignore, obj).fadeOut(options.transitionTime);
$(els[current]).fadeIn(options.transitionTime);
}
else {
$(els[current]).css("display", "block");
}
}
function transition(next) {
$(els[current]).fadeOut(options.transitionTime);
$(els[next]).fadeIn(options.transitionTime);
current = next;
cue();
};
function cue() {
if ($("> *", obj).length < 2) return false;
if (timer) clearTimeout(timer);
if (!options.pauseNavigation) {
timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
}
};
this.showItem = function(item) {
if (timer) clearTimeout(timer);
transition(item);
};
cue();
}
this.showItem = function(item) {
transitionObject.showItem(item);
};
return this.each(function() {
transitionObject = new Trans(this);
});
}
})(jQuery);
Usage is also quite straightforward. Include jQuery, and the plugin source, and use this:
$(document).ready(function() { $(".container").fadeTransition(); });
There are a couple of options to configure the animation properties:
$(".container").fadeTransition({pauseTime: 5000, transitionTime: 2000, ignore: "#introslide", delayStart: 3000, pauseNavigation: true});
pauseTime is the number of milliseconds each child of .container will be displayed for.
transitionTime is the number of milliseconds the fade in / fade out animation will last for.
ignore is a jquery selector that excludes a particular element from being included in the animation cycle. This is useful for showing an "introductory" slide
delayStart is a time in milliseconds that must elapse before the animation begins
pauseNavigation only allows the fade transition to occur when the user clicks on the navigation buttons
See also: DHTML Fade Effect
August 5th, 2009 at 6:52 pm
[...] 4. Fade Transition Plugin for jQuery [...]
August 10th, 2009 at 4:50 pm
[...] 4. Fade Transition Plugin for jQuery Demo [...]
September 28th, 2009 at 1:48 am
[...] Fade Transition Plugin for jQuery [...]
October 28th, 2009 at 1:21 am
thx it works!
November 19th, 2009 at 8:54 am
Nice one.
Any idea why IE8 changes font on transition ?
November 19th, 2009 at 9:43 am
Thanks for spotting that Daniel. This appears to be an IE8 bug (colour me surprised). See eg http://stackoverflow.com/questions/411058/ie-is-losing-cleartype.
I’ve implemented the fix recommended by various sites (removed “filter” attribute from the elements CSS manually, and setting a background colour for the element). Whilst this improves things somewhat, it doesn’t completely solve the problem
Cheers,
RRP
November 21st, 2009 at 9:02 pm
[...] 4. Fade Transition Plugin for jQuery [...]
November 24th, 2009 at 1:42 am
Great script, thanks so much!
Anyway, how I could add a navigator or between? or arrows?
Thanks again!
Juanma
November 24th, 2009 at 10:40 pm
Hi Juanma,
Yes – this is perfectly doable. As soon as I get a few minutes spare, I’ll post an update to include this feature.
Thanks,
Rob
November 25th, 2009 at 8:54 am
How can I implement this with custom navigation buttons? I have 10 images and 10 custom button. Your fade plugin works great, I just need to show image on click of the button also.
December 15th, 2009 at 3:17 am
hi,
about first demo..
i’ve problems with safari, chome, mozilla,.. it’s not compatible whit it?
only IE ?
thanks
December 15th, 2009 at 7:55 am
Hi Alex,
I’ve tested here in FF3.1 FF3.5, IE6, IE7, IE8 and it seems to work fine there. I haven’t tested in Safari or Chrome yet, but it’s definitely not IE only. Are you getting javascript errors, or some other problem?
January 23rd, 2010 at 1:34 am
Hi,
yes, the implementation of forward und back would be nice.
Thanks for sharing.
Veit
February 11th, 2010 at 10:56 pm
This script seems to be broken with jQuery 1.4.1.
February 11th, 2010 at 10:57 pm
I digress – it works fine, I simply made a typo
)
February 18th, 2010 at 5:24 am
I join the Manic’s request if you have time to show us how to create custom buttons /external links to the Fade
February 18th, 2010 at 8:46 am
Hi Mi8ke, Manic,
On the updated version of the demo, there are 4 red blocks in the top-right corner. These are actually links which allow you navigate through the sections by clicking.
The new code contains all the changes required to implement this custom navigation. Drop me a line if you need any further explanation.
NB: Am moving house from tomorrow, so will have no internet for a few days
(
February 18th, 2010 at 11:14 pm
Hi Rob, I tried to use the custom nav and moved it out of the content layer but I cannot stop the auto play transition. How can it be done. I mean just to fade/transit only when clicking the nav links?
Thank you.
March 9th, 2010 at 7:00 am
My page keeps on refreshing when nav is clicked, is there any way around that
March 9th, 2010 at 7:25 am
Nevermind I just placed ;
#; javascript:location.reload(false) in the href and its a go
March 28th, 2010 at 4:03 am
how to stop when one cycle is completed?
April 14th, 2010 at 9:48 pm
How can I modify this script to simulate Slide in and Slide out behavior. I tried using SlideUp and SlideDown but I want left to right slide and not up down slide effect.
April 14th, 2010 at 9:54 pm
@GJ: Have a look at the jQuery UI doco: http://docs.jquery.com/UI/Effects/Slide – you should be able to modify my plugin easily to use any of the UI effects. Good luck
April 15th, 2010 at 7:05 pm
I have changed the two lines in transition function as
$(els[current]).hide(“slide”, { direction: “left”,options.transitionTime);
$(els[next]).show(“slide”, { direction: “right”, options.transitionTime);
it doesnt seem to be working…any thing extra we want here…
April 15th, 2010 at 8:40 pm
Got it working but the effect is not so smooth
April 15th, 2010 at 8:45 pm
@GJ: glad you got it working. The animation “smoothness” may well depend on what elements you’re trying to transition. If it’s a very large image, or a large number of elements, you might find that the animation stutters. Your choice of browser will also make a huge difference here. Obviously, you need it to work in the lowest common denominator (almost always IE).
April 19th, 2010 at 11:15 pm
Hi Thanks for smooth slideshow
May 1st, 2010 at 2:43 am
Downloaded, looks awesome.
One thing you might want to improve is when you download it, and run it first you get a alert telling people to stop leeching your bandwidth and download the file for themselves.
I did download it and am using it locally.
Just FYI.
May 2nd, 2010 at 10:22 am
Hi Rob, Great script love your work!
Is there any way to slow the start time or have an intro image first before showing the images/script?
ie. have a start image which fades into the current script / gallery images, when it repeats it doesn’t show the intro image. I was thinking maybe just a background image then the script fade over and shows images.
I did an example in flash: http://heliconiahideaway.com/bungalow/
Here is my current modification with your great script: http://heliconiahideaway.com/bungalow/test.php for reference.
Many Thanks again for any help or suggestions in advance.
Let me know if your ever thinking about visiting the Cook Islands.
Cheers,
Sam
May 2nd, 2010 at 8:22 pm
Thanks for the heads-up Andrew – I’d zipped up the wrong version of the script for download. Now fixed.
Cheers,
RRP
May 3rd, 2010 at 9:07 pm
Hi Sam,
Thanks for your kind words. Yes – what you’re trying to achieve is fairly straightforward. I’ve modified the demo code to do this: you need to do four things to get it working:
1) Download the updated version of the plugin
2) Add your intro image to the list of “slides”
3) Add an “ignore” element to the fadeTransition options. This specifies an element that will not be included in the fade transition cycle
4) Add a “delayStart” element to the fadeTransition options. This specifies a time in milliseconds before the slideshow will begin.
Cheers,
RRP
May 7th, 2010 at 4:15 am
Great script for cycling images. Following up on David’s requirement. I too would like to see the animation stop once a user selects one of the navigation links. I’m curious how the #; javascript:location.reload(false) in the href works.
Which href would this code be used in? i tried adding it to each href in rotator one as a test but it just returned the animation to the introslide image and the animation kicks in again.
May 7th, 2010 at 10:42 am
Hi Carl,
The latest version does allow the animations to be paused once a navigation item is clicked. Use the {pauseNavigation: true} option when initiating the transition effect, eg:
$(“.container”).fadeTransition({pauseTime: 5000, transitionTime: 2000, pauseNavigation: true});
May 14th, 2010 at 10:23 pm
thank you!!!
June 15th, 2010 at 4:00 am
Thanks for the code, not overly complicated, editable and does it’s job very well. Nice one
.
July 29th, 2010 at 12:57 am
Very well script, thanks!