|
|
|
|
|
The jQuery UI FadeOver plugin makes it easy to produce mouseover effects that fade in and out rather than simply appearing and disappearing as they would with the CSS :hover selector. FadeOver also supports the active and disabled states, so you can fade to a different image or set of CSS rules when your control is clicked or disabled too.
There are a number of different ways of using FadeOver - the simplest is probably to use a set of four images the same size; one for the normal state, one for the 'over' state, one for the 'active' state and one for the 'disabled' state. You can also use pure HTML, applying different CSS rules to each of the four button states, or if you need more flexibility; you can specify separate chunks of HTML for each of the states. FadeOver also supports generating standard jQuery UI buttons for the jQuery UI CSS framework using syntax very similar to the normal UI button plugin, and will eventually include a wrapper to allow you to use it as a drop-in replacement for normal jQuery UI buttons.
A very simple FadeOver using only two images looks like this:
<div id="fadeover_1"></div> <script> $('#fadeover_1').fadeover({ images: { normal: 'normal.png', over: 'over.png' } }); </script>
A pure HTML+CSS example looks like this:
<style>
#fadeover_2 .ui-widget-fadeover-container-div {
width: 200px;
background-color: white;
}
#fadeover_2 .ui-widget-fadeover-over {
color: red;
}
#fadeover_2 .ui-widget-fadeover-normal {
color: green;
}
#fadeover_2 .ui-widget-fadeover-active {
color: blue;
}
#fadeover_2 .ui-widget-fadeover-disabled {
color: gray;
}
</style>
<div id="fadeover_2">Hello - Widget content goes here</div>
<script>
$('#fadeover_2').fadeover();
</script>
Of course, you will also need to load jQuery UI and the jquery.ui.fadeover.js plugin itself in the <head> section of your page. Something like this will do:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> <script src="jquery.ui.fadeover.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" rel="stylesheet">
Use the following options to specify the content of the widget. If none of these are specified, the HTML contents of the selected element will be used instead (and you'll need to apply your state changes via CSS).
| images | Object (Default: null) | Use this option to specify a set of images to use for each of the FadeOver states. (Show details) |
|---|---|---|
DetailsIf you have a set of images that you wish to use for a FadeOver, you can use this option to avoid having to write<img> tags or CSS rules.
Code examplesInitialize the fadeover widget specifying four images to be used for each of the states:$('.selector').fadeover({ images: { normal: 'normal.gif', over: 'over.gif', disabled: 'disabled.gif', active: 'disabled.gif' } }); | ||
| html_fragments | Object (Default: null) | Use this option to specify completely separate chunks of HTML for each of the FadeOver states. (Show details) |
DetailsThis allows you specify completely separate chunks of HTML code for each of the four states. It's probably better not to use this and instead perform all the changes you need via CSS selectors however, the option is provided anyway to give you complete control over the look of your FadeOver widgets.Code examplesInitialize the fadeover widget specifying different chunks of HTML for each state:$('.selector').fadeover({ html_fragments: { normal: '<span style="color: green;">Out</span>', over: '<span style="color: red;">In</span>', disabled: '<span style="color: gray;">Disabled</span>', active: '<span style="color: yellow;">Active</span>' } }); | ||
| ui_button | Object (Default: null) | Specifies that the widget should be a standard jQuery UI button (but with fade effects). (Show details) |
DetailsThis allows you to produce a UI button that looks exactly like the standard jQuery UI button, except that with FadeOver, the button fades from one state to another rather than changing instantly. Please note the parameters for the ui_button object are designed to match those of the base jQuery UI button widget, with one addition, you must specify Code examplesInitialize the fadeover widget using Atom XML data:$('.selector').fadeover({ ui_button: { enabled: true, label: 'Hello', icons: { primary: 'ui-icon-gear', secondary: null } } }); | ||
The following options are optional, but offer you lots of possibilities for customizing the plugin:
| width | Integer (Default: null) | The width of the control. (Show details) |
|---|---|---|
DetailsIf you do not specify this parameter, the widget will attempt to autocalculate the width of the control.Code examplesInitialize the fadeover widget with thewidth option specified:$('.selector').fadeover({ width: 200 }); | ||
| height | Integer (Default: null) | The height of the control. (Show details) |
DetailsIf you do not specify this parameter, the widget will attempt to autocalculate the height of the control.Code examplesInitialize the fadeover widget with theheight option specified:
$('.selector').fadeover({ height: 150 }); | ||
| alt | String (Default: '') | The alt tag to be used in the case of image or UI buttons. (Show details) |
DetailsCurrently this option has no effect for pure CSS or HTML fragment buttons. For UI buttons and image sets, this specifies the alternate text for the control. If the title is not specified, the alt value will be used for the title attribute.Code examplesInitialize the fadeover widget as an image button with thealt option specified:
$('.selector').fadeover({ images: { normal: 'normal.png', over: 'over.png' }, alt: 'Button' }); Initialize the fadeover widget as a UI button with the alt option specified:
$('.selector').fadeover({ ui_button: { enabled: true, text: true, label: 'Button', icons: { primary: 'ui-icon-gear', secondary: null } }, alt: 'Button' }); | ||
| title | String (Default: null) | Specifies the title attribute of the widget. (Show details) |
DetailsCurrently this option has no effect for pure CSS or HTML fragment buttons. For UI buttons and image sets, this specifies the title text for the control. If the title is not specified, the alt value will be used for the title attribute.Code examplesInitialize the fadeover widget using button images with thetitle option specified:$('.selector').fadeover({ images: { normal: 'normal.png', over: 'over.png' }, title: 'Button' }); Initialize the fadeover widget as a UI button with the title option specified:
$('.selector').fadeover({ ui_button: { enabled: true, text: true, label: 'Button', icons: { primary: 'ui-icon-gear', secondary: null } }, title: 'Button' }); | ||
| disabled | Boolean (Default: false) | Specifies whether the control should be disabled. (Show details) |
DetailsUse this option to initialize the control in the already-disabled state.Code examplesInitialize the fadeover widget with thedisabled option specified:$('.selector').fadeover({ disabled: true }); | ||
| clickable | Boolean (Default: true) | Specifies whether the button can be clicked on. (Show details) |
DetailsSet this to false to disable the mouse cursor change and click action associated with the widget (without actually changing to the disabled state).Code examplesInitialize the fadeover widget with theclickable option specified:$('.selector').fadeover({ clickable: false }); | ||
| loading_img | String (Default: ajaxloader.gif) | The ajax loader animation to display while the widget is loading. (Show details) |
DetailsTo improve performance you can precache this image before loading any FadeOver widgets.Code examplesInitialize the fadeover widget with theloading_img option specified:
$('.selector').fadeover({ loading_img: 'loader.gif', images: { normal: 'normal.png', over: 'over.png' }, }); | ||
| over_duration | Integer (Default: 200) | Specifies the duration of the mouseover fade animation. (Show details) |
DetailsThis specifies (in milliseconds) the duration of the fade animation when switching to the 'over' state. Usefalse to indicate that no animation should be performed.
Code examplesInitialize the fadeover widget with theover_duration option specified:
$('.selector').fadeover({ over_duration: 50 }); | ||
| out_duration | Integer (Default: 600) | Specifies the duration of the mouseout fade animation. (Show details) |
DetailsThis specifies (in milliseconds) the duration of the fade animation when switching from the 'over' state back to the 'normal' state. Usefalse to indicate that no animation should be performed.
Code examplesInitialize the fadeover widget with theout_duration option specified:
$('.selector').fadeover({ out_duration: 2000 }); | ||
| active_down_duration | Integer (Default: false) | Specifies the duration of the click animation. (Show details) |
DetailsBy default, clicking on the widget will immediately switch to the 'active' state. If you wish to fade, specify a duration (in milliseconds) for the fade using this option. Usefalse to indicate that no animation should be performed.
Code examplesInitialize the fadeover widget with theactive_down_duration option specified:
$('.selector').fadeover({ active_down_duration: 100 }); | ||
| active_up_duration | Integer (Default: 600) | Specifies the duration of the click release animation. (Show details) |
DetailsSpecifies the duration (in milliseconds) of the fade animation that's used when switching from the 'active' to the 'normal' state. Usefalse to indicate that no animation should be performed.
Code examplesInitialize the fadeover widget with theactive_up_duration option specified:
$('.selector').fadeover({ active_up_duration: 1000 }); | ||
| disable_duration | Integer (Default: 200) | The duration of the animation when disabling the control. (Show details) |
DetailsSpecifies the duration (in milliseconds) of the fade animation used when switching to the 'disabled' state. Usefalse to indicate that no animation should be performed.
Code examplesInitialize the fadeover widget with thedisable_duration option specified:
$('.selector').fadeover({ disable_duration: 200 }); | ||
| enable_duration | Integer (Default: 600) | The duration of the animation when enabling the control. (Show details) |
DetailsSpecifies the duration (in milliseconds) of the fade animation used when switching from the 'disabled' state to the 'normal' state. Usefalse to indicate that no animation should be performed.
Code examplesInitialize the fadeover widget with theenable_duration option specified:
$('.selector').fadeover({ enable_duration: 1000 }); | ||
| autosize_slide_animate_duration | Integer (Default: 200) | The duration of the resizing animation during control autosizing. (Show details) |
DetailsSpecifies the duration of the animation that changes the control's size as part of the autosizing process (only used if you do not specify a width or height).Code examplesInitialize the fadeover widget with theautosize_slide_animate_duration option specified:$('.selector').fadeover({ autosize_slide_animate_duration: 500 }); | ||
| autosize_fade_animate_duration | Integer (Default: 600) | The duration of the fade animation during control autosizing. (Show details) |
DetailsSpecifies the duration of the animation that fades-in the control during the autosizing process (only used if you do not specify a width or height).Code examplesInitialize the fadeover widget with theautosize_fade_animate_duration option specified:
$('.selector').fadeover({ autosize_fade_animate_duration: 200 }); | ||
If you wish to update your own code with the state of the fadeover widget, simply hook into the following events.
| ready | Function | Triggered when the widget is finished setting up. (Show details) |
|---|---|---|
DetailsUse this event to have your own code respond after the fadeover widget has finished setting itself up.Code examplesAttach to theready event at initialization time:
$('.selector').fadeover({ ready: function() { alert('fadeover ready'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverready',function () { alert('fadeover ready'); }); | ||
| startover | Function | Triggered when the widget begins fading to the 'over' state. (Show details) |
DetailsUse this event to have your code respond when the widget begins fading to the 'over' state.Code examplesAttach to thestartover event at initialization time:$('.selector').fadeover({ startover: function() { alert('fadeover mouseover started'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverstartover',function () { alert('fadeover mouseover started'); }); | ||
| endover | Function | Triggered when the widget finishes fading to the 'over' state. (Show details) |
DetailsUse this event to have your code respond when the widget finishes fading to the 'over' state.Code examplesAttach to theendover event at initialization time:$('.selector').fadeover({ endover: function() { alert('fadeover mouseover ended'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverendover',function () { alert('fadeover mouseover ended'); }); | ||
| startout | Function | Triggered when the widget begins fading from the 'over' state to the 'normal' state. (Show details) |
DetailsUse this event to have your code respond when the widget begins fading from the 'over' state, back to the 'normal' state.Code examplesAttach to thestartout event at initialization time:$('.selector').fadeover({ startout: function() { alert('fadeover mouseout started'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverstartout',function () { alert('fadeover mouseout started'); }); | ||
| endout | Function | Triggered when the widget finishes fading from the 'over' state to the 'normal' state. (Show details) |
DetailsUse this event to have your code respond when the widget finishes fading from the 'over' state to the 'normal' state.Code examplesAttach to theendout event at initialization time:$('.selector').fadeover({ endout: function() { alert('fadeover mouseout ended'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverendout',function () { alert('fadeover mouseout ended'); }); | ||
| startdown | Function | Triggered when the widget begins fading to the 'active' state. (Show details) |
DetailsUse this event to have your code respond when the widget begins fading to the 'active' state.Code examplesAttach to thestartdown event at initialization time:$('.selector').fadeover({ startdown: function() { alert('fadeover mousedown started'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverstartdown',function () { alert('fadeover mousedown started'); }); | ||
| enddown | Function | Triggered when the widget finishes fading to the 'active' state. (Show details) |
DetailsUse this event to have your code respond when the widget finishes fading to the 'active' state.Code examplesAttach to theenddown event at initialization time:$('.selector').fadeover({ enddown: function() { alert('fadeover mousedown ended'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverenddown',function () { alert('fadeover mousedown ended'); }); | ||
| startup | Function | Triggered when the widget begins fading from the 'active' state back to the 'normal' state. (Show details) |
DetailsUse this event to have your code respond when the widget begins fading from the 'active' state back to the 'normal' state.Code examplesAttach to thestartup event at initialization time:$('.selector').fadeover({ startup: function() { alert('fadeover mouseup started'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverstartup',function () { alert('fadeover mouseup started'); }); | ||
| endup | Function | Triggered when the widget finishes fading from the 'active' back to the normal state. (Show details) |
DetailsUse this event to have your code respond when the widget finishes fading from the 'active' back to the 'normal' state.Code examplesAttach to theendup event at initialization time:$('.selector').fadeover({ endup: function() { alert('fadeover mouseup ended'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverendup',function () { alert('fadeover mouseup ended'); }); | ||
| startdisable | Function | Triggered when the widget begins fading to the 'disabled' state. (Show details) |
DetailsUse this event to have your code respond when the widget begins fading to the 'disabled' state.Code examplesAttach to thestartdisable event at initialization time:$('.selector').fadeover({ startdisable: function() { alert('fadeover disable started'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverstartdisable',function () { alert('fadeover disable started'); }); | ||
| enddisable | Function | Triggered when the widget finishes fading to the 'disabled' state. (Show details) |
DetailsUse this event to have your code respond when the widget finishes fading to the 'disabled' state.Code examplesAttach to theenddisable event at initialization time:$('.selector').fadeover({ enddisable: function() { alert('fadeover disable ended'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverenddisable',function () { alert('fadeover disable ended'); }); | ||
| startenable | Function | Triggered when the widget begins fading from the 'disabled' state back to the 'normal' state. (Show details) |
DetailsUse this event to have your code respond when the widget begins fading from the 'enabled' state back to the 'normal' state.Code examplesAttach to thestartenable event at initialization time:$('.selector').fadeover({ startenable: function() { alert('fadeover enable started'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverstartenable',function () { alert('fadeover enable started'); }); | ||
| endenable | Function | Triggered when the widget finishes fading from the 'disabled' state back to the 'normal' state. (Show details) |
DetailsUse this event to have your code respond when the widget finishes fading from the 'disabled' state back to the 'normal' state.Code examplesAttach to theendenable event at initialization time:$('.selector').fadeover({ endenable: function() { alert('fadeover enable ended'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverendenable',function () { alert('fadeover enable ended'); }); | ||
| startautosize | Function | Triggered when the widget begins autosizing. (Show details) |
DetailsUse this event to have your code respond when the widget begins autosizing.Code examplesAttach to thestartautosize event at initialization time:$('.selector').fadeover({ startautosize: function() { alert('fadeover autosize started'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverstartautosize',function () { alert('fadeover autosize started'); }); | ||
| endautosize | Function | Triggered when the widget finishes autosizing. (Show details) |
DetailsUse this event to have your code respond when the widget finishes autosizing.Code examplesAttach to theendautosize event at initialization time:$('.selector').fadeover({ endautosize: function() { alert('fadeover autosize ended'); } });Attach to the event after initialization: $('.selector').fadeover(); $('.selector').bind('fadeoverendautosize',function () { alert('fadeover autosize ended'); }); | ||
If you wish to control the widget via external controls, call the following methods:
| has_active | .fadeover("has_active"); | Checks whether there is an active state. (Show details) |
|---|---|---|
DetailsReturns true or false depending on whether this instance of the widget has an active state.Code examplesInvoke thehas_active method:$('.selector').fadeover(); alert($('.selector').fadeover('has_active')); | ||
| has_disabled | .fadeover("has_disabled"); | Checks whether there is a disabled state. (Show details) |
DetailsReturns true or false depending on whether this instance of the widget has a disabled state.Code examplesInvoke thehas_disabled method:$('.selector').fadeover(); alert($('.selector').fadeover('has_disabled')); | ||
| is_image | .fadeover("is_image") | Check whether this is an image-based FadeOver. (Show details) |
DetailsReturns true or false depending on whether this instance of the widget is using images for the states (initialized using the images: {} option).Code examplesInvoke theis_image method and show the result:$('.selector').fadeover(); alert($('.selector').fadeover('is_image')); | ||
| is_html | .fadeover("is_html") | Check whether this is an HTML-based FadeOver. (Show details) |
DetailsReturns true or false depending on whether this instance of the widget is using HTML fragments for the states (initialized using the html_fragments: {} option).Code examplesInvoke theis_html method and display the results:$('.selector').fadeover(); alert($('.selector').fadeover('is_html')); | ||
| is_button | .fadeover("is_button") | Check whether this is a jQuery UI button style FadeOver. (Show details) |
DetailsReturns true or false depending on whether this instance of the widget is a jQuery UI style button (initialized using the ui_button: {} option).Code examplesInvoke theis_button method:$('.selector').fadeover(); alert($('.selector').fadeover('is_button')); | ||
| is_css | .fadeover("is_css") | Check whether this is a CSS-only FadeOver. (Show details) |
DetailsReturns true or false depending on whether this instance of the widget is a CSS-only FadeOver (initialized without specifying ui_button, html_fragments or images options).Code examplesInvoke theis_css method:$('.selector').fadeover(); alert($('.selector').fadeover('is_css')); | ||
| refresh | .fadeover("refresh") | Reinitialize the widget. (Show details) |
DetailsUse this method to trigger FadeOver into reinitalizing itself - it'll setup the various state containers again and should take into account any option changes you make.Code examplesInvoke therefresh method:$('.selector').fadeover(); $('.selector').fadeover('refresh'); | ||
| destroy | .fadeover("destroy") | Destroy the widget, returning the DOM to its original state. (Show details) |
DetailsUse this method to destroy the widget and return the DOM to its original state.Code examplesInvoke thedestroy method:$('.selector').fadeover(); $('.selector').fadeover('destroy'); | ||
| disable | .fadeover("disable") | Disable the widget. (Show details) |
DetailsUse this method to trigger the widget to switch to the 'disabled' state.Code examplesInvoke thedisable method:$('.selector').fadeover(); $('.selector').fadeover('disable'); | ||
| enable | .fadeover("enable") | Enable the widget. (Show details) |
DetailsUse this method to trigger the widget to return to the 'normal' state from the 'disabled' state.Code examplesInvoke theenable method:$('.selector').fadeover(); $('.selector').fadeover('enable'); | ||
The FadeOver plugin supports using the jQuery UI CSS framework to style its look and feel (Use the ui_button option), this styling includes colors and background textures. I would recommend using the Themeroller tool to customize the look-and-feel of the widget. However, you can also style everything yourself, as all the relevant containers have unique CSS class names. Simply use a DOM inspector such as Firebug to determine the class name of the element you wish to style.
If you find yourself making changes to FadeOver and you think they'd be useful for other people, or if you'd like to do one of the items in the TODO file or fix a bug, please fork the GitHub repository, make your changes in your forked version, then issue me with a pull request when you're ready to have your changes checked by me and merged into the main trunk.
This software is made available completely free and open-source under my own 1-clause BSD license (the Javascript license), or the standard 2-clause BSD license if you prefer. I don't ask for donations, although if you want to say thanks for the software; the best thing you can do is give me a link - either to the fadeover page or my homepage.
  | |
|
| |
|
| |
 | |
Powered by Coppermine Photo Gallery
Music - Gallery - Software -
Links - Contact - Blog
Cuckmere Haven - Time-lapse - Desktop Wallpaper Downloads - PDF Picture Books
jQuery.ui.MediaSlide - jQuery.ui.FadeOver
© 2001-2012 Kieran Simkin
All Rights Reserved
Powered by Coppermine Photo Gallery
Web hosting by Digital Crocus
Cuckmere Haven - Time-lapse - Desktop Wallpaper Downloads - PDF Picture Books
jQuery.ui.MediaSlide - jQuery.ui.FadeOver
© 2001-2012 Kieran Simkin
All Rights Reserved
Powered by Coppermine Photo Gallery
Web hosting by Digital Crocus
