Simple Effects Plugins

Feb

2008

read 33 comments

jQuery has a nice selection of core animation effects, such as .show('speed') and .hide('speed'), .slideUp() and .slideDown(), and .fadeIn() and .fadeOut(). It even has a couple methods for toggling effects — the aptly named .toggle('speed') and .slideToggle().

All of these methods have optional speed, easing, and callback arguments — although a couple are special cases. The .show() and .hide() methods, when used without a speed, will immediately show and hide the matched set of elements with no animation. When the speed argument is included, the matched elements are shown and hidden gradually by animating their height, width, and opacity simultaneously. The .toggle() method shares its name with a method that takes two arguments that alternate being triggered. All of the other effect methods have a default speed of 400ms.

The Flexible .animate()

jQuery internally uses another method, .animate(), to define these shorthand effect methods, and it makes .animate() available to us to do the same. So, let's create our own method that we can use the same way we would use, for example, .slideToggle().

Custom Animation Methods

Someone on the jQuery discussion list recently asked if there was a .fadeToggle() effect in jQuery. In my reply, I admitted that there wasn't one, but suggested that it wouldn't be too hard to create using .animate(). We just attach .fadeToggle to jQuery.fn and pass in the speed, easing, and callback arguments. Then, we return this.animate() with the effect we want, along with those same arguments:

PLAIN TEXT

JavaScript:

jQuery.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};

Now, when we want to use it, we can treat it the same as any other jQuery method. For example:

PLAIN TEXT

JavaScript:

$(document).ready(function() {
  $('#fade').click(function() {
    $(this).next().fadeToggle('slow');
  });
});

Try it out:

Watch me fade.

(Incidentally, Dan G. Switzer saw the discussion-list thread and blogged about it himself. Thanks, Dan!)

To create a method that toggles a fade and a slide at the same time, all we need to do is repeat the process, adding a "height" parameter:

PLAIN TEXT

JavaScript:

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);  
};

Give this one a try:

Watch me slide and fade.

Blind Toggle

Let's try one more — a "blind" effect. Instead of changing the height of the element, as we do with a "slide" animation, we're going to move the entire element up and down.

The plugin itself will still be fairly rudimentary, but we'll need to set up some CSS to get it to work correctly. Here is the CSS:

PLAIN TEXT

CSS:

#box {
  padding: 10px;
  height: 100px;
  width: 100px;
  background: #e459e9;
}
#box-outer {
  overflow: hidden;
  height: 120px;
  margin: 20px;
}

Notice that we have two "boxes" styled here. The first one will be in the markup itself, but the second one, since it's only being used to help with the effect, will be created by our script. The important properties here are #box-outer's overflow: hidden and height: 120px. The hidden overflow will allow #box to seemingly disappear as it moves up, while the height (which is #box's height plus its top and bottom padding) will keep the rest of the page from shifting along with the box.

Now, on to the plugin code:

PLAIN TEXT

JavaScript:

jQuery.fn.blindToggle = function(speed, easing, callback) {
  var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
  return this.animate({marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h}, speed, easing, callback);  
};

While relatively simple, there are a couple things here that might be confusing to jQuery/JavaScript beginners. The first line inside the function declares a variable for the height of this, plus the top and bottom padding ("this" here refers to whatever is matched by the selector in the script that uses the plugin). The parseInt() JavaScript function function looks at a string from left to right until it encounters a non-numeric character. The string of digits up to that character is converted into an integer, stripping off the trailing non-numeric character. So, "10px" becomes 10.

The line that follows animates the marginTop property. It uses a ternary (conditional) operator to test if marginTop is less than zero. If it is, the element's marginTop property animates to 0; if not, it animates to negative the value stored in the h variable.

Finally, we're ready to put this plugin to use:

PLAIN TEXT

JavaScript:

$(document).ready(function() {
  var $box = $('#box')
    .wrap('<div id="box-outer"></div>');
  $('#blind').click(function() {
    $box.blindToggle('slow');  
  });    
});

Line 2 "caches" our selector, since we're using it more than once. Then we wrap a div around the "#box" div and bind a click handler to a button. Let's see how this one looks:

Blind me up. Blind me up. Blind me up.

So, now we have three simple effects methods that we apply to our sites for a little extra flair.

Enchant

For really cool effects, check out the brand new jQuery Enchant — a set of effects similar to the popular script.aculo.us effects for Prototype. While Enchant is still only in an Alpha version, it already looks fantastic.

comment feed

33 comments

Braden

February 13, 2008 at 1:37 am

Looks like you wanted http://ui.jquery.com/enchant/1.0a/demos/ for the enchant demos.

Reply
Karl

February 13, 2008 at 1:43 am

Oops. Good catch, Braden. Fixed.

Reply
John Kitson

February 13, 2008 at 5:16 am

Nice effects - I like the slideFadeToggle since it has a better default behaviour in IE than SlideToggle, which seems to make the contents of the DIV jump a few pixels on completion of the animation. I'm sure that is fixable with CSS but slideFadeToggle just looks slicker. Thanks Karl.

Reply
Bohdan Ganicky

February 13, 2008 at 5:35 am

Looks like you've confused BLIND and SLIDE. I guess slide stands for moving the entire element and blind stands for just changing the height of an element. Anyway, thanks for this nice howto...things looks so simple now

Reply
andrea varnier

February 13, 2008 at 3:05 pm

thanks Karl, you're great!!

Reply

D Jones

February 22, 2008 at 10:44 am

I used the fade effect to fade a background image behind some images, but now I cannot make not affect the siblings.

// do something on document ready
$(".thumbnailbg").fadeTo("fast", 0.0); // This sets the opacity of the thumbs to fade down to 0% when the page loads

	$(".thumbnailbg").hover(function(){
		$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
	},function(){
   		$(this).fadeTo("slow", 0.0); // This should set the opacity back to 0% on mouseout
	$(".thumbnail").removeClass("thumbnailbg").show(); // This should make the thumbnail show always
	});
});

Located Here.

Jagan

March 3, 2008 at 8:35 am

Hi,
i'm working on vista gadgets. wanted to know if JQuery works in sidebar in vista, does it have any restrictions with the same. is it possible to create the same kind of effects in the sidebar gadget...?
if so can u plz let me how to go about it...?

Thanks

Reply
Karl

March 3, 2008 at 10:23 pm

Hi Jagan,

Don't know anything about Vista. You might have better luck on the jQuery discussion list.

Reply
Snowcore

March 5, 2008 at 11:39 am

jQuery is the best!
I use it everywhere!!!

Reply
Acronyms

March 12, 2008 at 2:56 am

The only problem is that almost all jQuery components are not so well documented.

Reply
ysamjo

March 12, 2008 at 9:02 am

Great blog! I've build a tumblr theme with the Slide-Fade effect over here.
Now I've got the problem that before the .hide removes all content-bodys it is loaded completely. With an slow internet connection it looks not so good. How can I prevent the hidden posts from loafing? I' stumbled over this plugin. But can I use it for my aim?

Reply
Coder

March 13, 2008 at 7:00 pm

Some really nice examples, i find that some of the effects in jQuery can be a big lagg-ish on some of the sites i have implimented them in, although on this website they seem to work so smoothly!

Reply
Toni

March 14, 2008 at 11:33 am

Sehr cooler Code, danke
toni

Reply
Florian

March 30, 2008 at 5:34 pm

Hi Karl,

Any idea why this code isn't working anymore when copying the fx.js and fx.slide.js
from http://www.learningjquery.com/2007/02/more-showing-more-hiding into my template?

//Checkbox select all/none $("#checkboxes_all").toggle( function() { $('input[@type=checkbox]').attr('checked', 'checked'); }, function() { $('input[@type=checkbox]').removeAttr('checked'); });

As soon as I put both snippets into it I can click and nothing happens :-/

thanks
Florian

Reply
Karl

March 30, 2008 at 8:56 pm

Hi Florian,
Not sure which fx.js and fx.slide.js files you're referring to. They aren't listed anywhere on the page you link to above.

If you're using jQuery 1.2 or higher, you should omit the "@" symbol in the selector. Actually, jQuery has a special ":checkbox" selector, so you could use $('input:checkbox') Also, try using .attr('checked', true) instead of .attr('checked', 'checked').

Hope that helps.

Reply
Ruby

April 18, 2008 at 12:55 pm

Thanks

lavabeat.net

Reply
mumuri

April 19, 2008 at 7:55 pm

is there a vertical .blindToggle ?

Reply
Geo

April 21, 2008 at 10:47 am

Great, thanks

Reply
Dan

April 21, 2008 at 12:47 pm

How would I make it toggle to say 50% opacity and than toggle back to 100%?

Reply

Karl

April 21, 2008 at 2:09 pm

Hi Dan,
Try something like this:

jQuery.fn.fadeSomeToggle = function(speed, easing, callback) {
  var op = $(this).css('opacity');
  return this.animate({opacity: op != 0.5 ? 0.5 : 1.0}, speed, easing, callback);
};

That should do it.

Dan

April 21, 2008 at 4:10 pm

Thanks!

Reply
pablo

May 16, 2008 at 6:58 pm

Could I use this events of jQuery to slide panels from right to left?

Reply
general salt

May 21, 2008 at 10:48 am

Jquery is the best!! I use it on my face…

Reply
Kean

May 22, 2008 at 3:48 pm

I am a jQuery plugin developer and I never knew that using 'toggle' inside animate is possible. Thanks for this great tip.

Reply
Aditya Bhatt

June 19, 2008 at 6:48 am

Jquery is very gr8. Its very useful for development with static as well as dynamic pages.

Reply
Josh

July 22, 2008 at 11:44 am

Love this tutorial. One question on the blind toggle, how can you make the panel start out hidden at the top?

Reply
ConstantinChirila

August 5, 2008 at 7:55 am

Hey Bradon, nice tutorial, but i cannot manage to make it start HIDDEN first tan toggle out and in. Like Josh said.

Reply
George

August 13, 2008 at 8:38 am

Presumably to make something start hidden you could call
$('#blind').hide();
first of all within the $(document).ready(...);

That way it will be visible for users without javascript.

GC

Reply
Peter

August 21, 2008 at 5:15 pm

Is is possible to have something slideUp and FadeOut at the same time? Can effects be chained in this manner?

Reply
Karl Swedberg

August 21, 2008 at 8:11 pm

Hi Peter,

Look at the slide-fade toggle example. That one slides an element and fades it at the same time. And yes, effects can be chained.

Reply
kyleabaker

August 22, 2008 at 1:55 am

I'm fairly new to jQuery, but I've been using several of the effects repeatedly. Now I'm stuck with an effect that I really need, but cannot seem to find a way to make it work in jQuery.

Basically all that I want is a Blind Toggle effect turned upside down. I want the element to slide down out of view and then slide back up into view. It sounds simple enough considering all of the things you can do with jQuery, but I just can't find a way to accomplish this.

The two effects slideUP (hides) and slideDown (reveals) work in the exact opposite manner that I'm needing, otherwise I would just use that. Any ideas?

Reply
Carlos

September 19, 2008 at 1:15 pm

Is there a way to get this Fade effect and or slide effect in jQuery on a mouseover event and can you either tell me or help me on how to implement this. Please email me with the solution. Don't know when I can get back to the blog.

Reply
Rohit

December 14, 2008 at 7:40 am

Hello Karl,
Thanks for such a nice example.I have one problem i have one table with rows containing select box in each and having name "mytable".when i use fadeToggle() ,i just don't want any value from select box of mytable
how i can manage this.Will you suggest me the way

Reply

3 Pings

37 More Shocking jQuery Plugins | Noupe

October 26, 2008 at 6:46 am

[...] Simple Effects Plugins- Nice animation effects that can easily toggle, hide, show, fade, slide [...]
Great New jQuery Plugins! | Design it

December 17, 2008 at 12:12 am

[...] Simple Effects Plugins- Nice animation effects that can easily toggle, hide, show, fade, slide [...]
37 More Shocking jQuery Plugins | SoftSeek!

January 4, 2009 at 9:32 am

[...] Simple Effects Plugins- Nice animation effects that can easily toggle, hide, show, fade, slide [...]

Learning jQuery