[memb_fade]

OTHER DOCS Available

Summary

This shortcode allows you to easily fade content in and out without knowing how to program in jQuery or JavaScript.

Shortcode Examples

 

[memb_fade fadeout=’5′] Show this immediately, and hide it again after 5 seconds. [/memb_fade]

 

[memb_fade delayshow=’10’ delayhide=’5′] Show after 10 seconds, and hide it again 5 seconds later. [/memb_fade]

 

<div id=’test’>my external div</div>
[memb_fade id=’test’ fadeout=’5′][/memb_fade]

 

[memb_fade style=”color:red” fadeout=0 delayshow=3 fadeshow=3 delayhide=3 fadehide=3]Test Content[/memb_fade]

 

[memb_fade fadeout=’5′ fadeout_function=”runThis()”] Show this immediately, and hide it again after 5 seconds. Run the runThis() function when complete.[/memb_fade]

 

Shortcode Parameters​

id: Name of the existing CSS ID to apply the animations effect to.  If the content is wrapped If no ID is supplied, an ID. If no ID is supplied, the shortcode will automatically assign an ID.  This attribute is not required for wrapped content, but is required for targettng other content on the page.

style: CSS style to apply to the wrapped content.  This attribute is not required, and defaults to no styling.  This attribute has no effect if the content is not wrapped.

target_class: Name of an existing CSS class to apply the fade-in and fade-out animations to.  By specifying this attribute, you can control the fade-in and fade-out effects of many pieces of content simultaneously.  This attribute defaults to none.  You can use any jQuery targetting notation here.  To target teh class “fader” you would use the parameter “.fader”.

fadeout:  This attribute determines whether the content will be displayed on page load or not.  A value of 0 will hide the content on page load.  Any value greater than 0 will display the content for that many seconds before applying the fadeout animation.  This attribute defaults to 0.

delayshow: This attributes determines the number of seconds until the content will become visible again.  This attribute defaults to 0.

fadeshow: This attribute determines how many seconds the fade-in animation takes.  A smaller number is a quicker animation, and a larger number is a slower animation.  This attribute defaults to 0.

delayhide: This attribute determines how many seconds to wait until the content starts to fade-out.  This attribute defaults to 0.

fadehide:  This attribute determines how many seconds the fade-out animation takes.   A smaller number is a quicker animation, and a larger number is a slower animation. This attribute defaults to 0.

delayhide_function:  JavaScript function to run when the animation completes.  used to synchronize multiple events with your animations.  Defaults to none.

delayshow_function:  JavaScript function to run when the animation completes.  used to synchronize multiple events with your animations.  Defaults to none.

fadeout_function: JavaScript function to run when the animation completes. used to synchronize multiple events with your animations. Defaults to none.

This shortcode enables you to easily use fade-in and fade-out animations on your content without having to touch or know any JavaScript or jQuery code.

You can wrap your content in this shortcode to affect the entire piece of content, or you can target the CSS ID or Class of an existing element on a page.

You can also optionally run JavaScript functions as each step of the animation completes. This is is useful for many different custom behaviors. For example you could synchronize a video or audio element to stop or start playing when it becomes invisible.

Shortcode Attributes

Conditional: No (?)
Nestable: No (?)
Accepts formatting: No (?)
Capturable: No (?)

Need Help With This? Get Help Instantly
9 ways to add more value to your membership site

[memb_fade]

This Applies To