The jquery slidetoggle() is great, but one thing I always thought it was missing is some opacity fading in the sliding animation. When I was coding this iteration of position absolute I wanted this kind of animation so I went there and coded it.
This is a very small plugin, but I still find the effect cooler than a regular sliding.
Get this to work
First add dependencies in your head document,
-
<script src="js/jquery.js" type="text/javascript"></script>
-
<script type="text/JavaScript" src="js/jquery.fadeSliderToggle.js"></script>
In your dom ready add something like this:
-
$(document).ready(function() {
-
$(".fadeNext").click(function(){
-
$(this).next().fadesliderToggle()
-
return false;
-
})
-
})
Customizations
You can change the animation speed or the easing easily (you need jQuery UI for a non-default easing).
-
$(".tagBtn").click(function(){
-
$(this).next().fadesliderToggle({
-
speed:300,
-
easing : "swing"
-
})
-
return false;
-
})
That’s it !
Download the source code View demo
Version 1.1 online
July 7, version1.1 : IE bug correction
Tested on:
Firefox 3+
Internet Exploder 6&7
Safari 4
If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!
Your fade is a nice addition
Nice!
Its not working in IE7
This is so useful. I translated Turkish and published at my home page. Thank you for this plugin.
[...] Choose It AKPC_IDS += “141,”; tweetmeme_url = ‘http://choosedaily.com/141/jquery-fade-slide-toggle-plugin/’;tweetmeme_source = ‘choosedaily’;tweetmeme_style = ‘compact’; This entry was posted on Tuesday, July 7th, 2009. You can leave a comment, or trackback from your own site. [...]
indeed, it has problems in IE7. doesn`t stay open.
nice little idea.. but here’s a little improvement:
- remove the css style from the source
- use toggle for the opacity and thus shrinking the function
jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: ‘toggle’, height: ‘toggle’}, speed, easing, callback);
};
The IE bug is corrected sorry about that, dunno how i could have missed that
Hey I have used this in a site of mine. Using multiple additions of the div class “fader”, sometime when I click to open the slider the text is not visible although the slider hasn’t changed.
Any ideas why this is happening. Try switching to the about or contact part then back to home if it doesnt dissappear for you.
http://users.aber.ac.uk/rpc7/menufaderandslider
Thanks in Advance Reece (reece_cropley@hotmail.com)
[...] jQuery fade and slide toggle plugin [...]
Great jquery tutorial. Added to http://tutlist.com
very simple and nice! just what I was looking for! thanks!
Great plugin. Will add this to http://www.web-design-talk.co.uk
Thanks so much for this wonderful plugin and tutorial. It has been implemented on JhanellesFashions.com
[...] check it out [...]
[...] jQuery fade and slide toggle pluginThe jquery slidetoggle() is great, but but this plugin allows some opacity fading in the sliding animation. This is a very small plugin, but with different effects than regular sliding. [...]
This would be more lovely if integrated with cookies.
That is, the script would remember whether the state is collapsed or expanded.
Hey xaliber,
This is a good idea, but it was originally planned as a replacement of the slidetoggle jquery core fx, and follow the same rules.
Hmm… so does that mean this could be integrated with the jQuery Cookies plugin?
[...] jQuery fade and slide toggle plugin The jquery slidetoggle() is great, but but this plugin allows some opacity fading in the sliding animation. This is a very small plugin, but with different effects than regular sliding. [...]
You made a mountain out of a molehill. A toggle() function on the click element and fadein() on the sliding element would have sufficed.
I certainly don’t see this small plugin as a mountain
[...] jQuery fade and slide toggle plugin [...]
Demo does not work over here.
What browser are you using?
[...] jQuery plugin fade e slide toggle [...]
[...] フェードしながらスライドするjQueryプラグイン デモ [...]
Just added at Technology Story
Thanks for the nice plug-in! BTW, your examples have a minor case-sensitivity bug: instead fadesliderToggle you should have fadeSliderToggle
Good Plug-in but one issue, In fader div content font style: ‘Arial’, ‘bold’ is not supported. Bold fonts are not displays properly
[...] for Web Developers Simple Way to Random Display or Rotate Content Using JavaScript and CSS jQuery fade and slide toggle plugin 15 Ways to Improve CSS Techniques Using jQuery jQuery Link Nudge Plugin 37 More Shocking jQuery [...]
Pakaaoo, bakwaas faltoo demo
[...] [...]
i think this site is great
Please, check your examples on this page.
There is no function “fadesliderToggle” in the plugin.
Hi, thanks for this!
Could you please tell me how I can use this if the link to activate the toggle if it’s not directly above the div that it has to toggle?
I would also like to know that. My element is inside a for semantic purposes but this seems to stop the sliding effect from working. I’m completely new to jquery and javascript in general so any help would be appreciated.
Damn! I shouldn’t have used tags. This is what I meant to say:
I would also like to know that. My anchor element is inside a paragraph, for semantic purposes, but this seems to stop the sliding effect from working. I’m completely new to jquery and javascript in general so any help would be appreciated.