-
Notifications
You must be signed in to change notification settings - Fork 75
jQuery.effects.define() #288
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closed
Closed
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
c61c4ad
jQuery.effects.define: Initial docs
scottgonzalez 5ccdf07
fixup: typo
scottgonzalez b6d3766
fixup: Add return value
scottgonzalez 5c7a0c9
jQuery.effects.scaledDimensions: Initial docs
scottgonzalez b942814
jQuery.effects.clipToBox: Initial docs
scottgonzalez 3c38d01
jQuery.effects.createPlaceholder: Initial docs
scottgonzalez cf5374a
jQuery.effects.removePlaceholder: Initial docs
scottgonzalez db22ff3
fixup createPlaceholder: typo
scottgonzalez 20a173e
fixup clipToBox: spacing
scottgonzalez a25ed23
fixup createPlaceholder: spacing
scottgonzalez 9467ddd
fixup removePlaceholder: spacing
scottgonzalez 199f3bf
fixup scaledDimensions: spacing
scottgonzalez cacc414
jQuery.effects.saveStyle: Initial docs
scottgonzalez 026a553
jQuery.effects.restoreStyle: Initial docs
scottgonzalez 7dc40f7
fixup: saveStyle
scottgonzalez File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <?xml version="1.0"?> | ||
| <entries> | ||
| <entry type="method" name="jQuery.effects.clipToBox" return="Object" added="1.12"> | ||
| <title>jQuery.effects.clipToBox()</title> | ||
| <signature> | ||
| <argument name="animationProperties" type="Object"> | ||
| <desc>A set of properties that will eventually be passed to <a href="//api.jquery.com/animate/"><code>.animate()</code></a>. The <code>animationProperties</code> must contain a <code>clip</code> property.</desc> | ||
| </argument> | ||
| </signature> | ||
| <desc>Calculates position and dimensions based on a clip animation.</desc> | ||
| <longdesc> | ||
| <p>This method is useful for mimicking a clip animation when using a placeholder for effects. Given a clip animation, <code>jQuery.effects.clipToBox()</code> will generate an object containing <code>top</code>, <code>left</code>, <code>width</code>, and <code>height</code> properties which can be passed to <a href="//api.jquery.com/css/"><code>.css()</code></a> or <a href="//api.jquery.com/animate/"><code>.animate()</code></a>. This method is generally used in conjunction with <a href="/jQuery.effects.createPlaceholder/"><code>jQuery.effects.createPlaceholder()</code></a>.</p> | ||
| </longdesc> | ||
| <category slug="effects-core"/> | ||
| <category slug="effects"/> | ||
| </entry> | ||
| </entries> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <?xml version="1.0"?> | ||
| <entries> | ||
| <entry type="method" name="jQuery.effects.createPlaceholder" return="jQuery" added="1.12"> | ||
| <title>jQuery.effects.createPlaceholder()</title> | ||
| <signature> | ||
| <argument name="element" type="jQuery"> | ||
| <desc>The element to create a placeholder for.</desc> | ||
| </argument> | ||
| </signature> | ||
| <desc>Creates a placeholder to support <code>clip</code> animations without disrupting the layout.</desc> | ||
| <longdesc> | ||
| <p>Many effects require animating the <code>clip</code> CSS property. In order to apply clipping, the element must be absolutely positioned. As a result, if an animation that utilizes clipping is applied to an element with static or relative positioning, the layout of the page will be affected when the animated element is removed from the flow. To compensate for this, a placeholder element with the same size and position can be inserted into the document.</p> | ||
| <p><code>jQuery.effects.createPlaceholder()</code> will create a placeholder with the same display, position, dimensions, and margins as the original element. The placeholder is inserted into the DOM as the next sibling of the original element. When the animation is complete, <a href="/jQuery.effects.removePlaceholder/"><code>jQuery.effects.removePlaceholder()</code></a> should be used to remove the inserted element.</p> | ||
| <div class="note">If the original element is already absolutely positioned, no placeholder will be generated since the page layout isn't affected. As a result, the return value will be <code>undefined</code>.</div> | ||
| </longdesc> | ||
| <category slug="effects-core"/> | ||
| <category slug="effects"/> | ||
| </entry> | ||
| </entries> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <?xml version="1.0"?> | ||
| <entries> | ||
| <entry type="method" name="jQuery.effects.define" return="Function" added="1.12"> | ||
| <title>jQuery.effects.define()</title> | ||
| <signature> | ||
| <argument name="name" type="String"> | ||
| <desc>The name of the effect to create.</desc> | ||
| </argument> | ||
| <argument name="mode" type="String" optional="true"> | ||
| <desc>The default mode for the effect. Possible values are <code>"show"</code>, <code>"hide"</code>, or <code>"toggle"</code>.</desc> | ||
| </argument> | ||
| <argument name="effect" type="Function"> | ||
| <argument name="options" type="Object"/> | ||
| <argument name="done" type="Function"/> | ||
| <desc>Defines the effect logic. The <code>options</code> argument contains <code>duration</code> and <code>mode</code> properties, as well as any effect-specific options.</desc> | ||
| </argument> | ||
| </signature> | ||
| <desc>Defines an effect.</desc> | ||
| <longdesc> | ||
| <p>Defines a new effect for use with <a href="/effect/"><code>.effect()</code></a>, <a href="/show/"><code>.show()</code></a>, <a href="/hide/"><code>.hide()</code></a>, and <a href="/toggle/"><code>.toggle()</code></a>. The effect method is invoked with <code>this</code> being a single DOM element. The <code>done</code> argument must be invoked when the animation is complete.</p> | ||
| <p><code>jQuery.effects.define()</code> stores the new effect in <code>jQuery.effects.effect[ name ]</code> and returns the function that was provided as the <code>effect</code> parameter.</p> | ||
| </longdesc> | ||
| <example> | ||
| <css><![CDATA[ | ||
| .elem { | ||
| position: absolute; | ||
| width: 150px; | ||
| height: 150px; | ||
| background: #3b679e; | ||
| } | ||
| ]]></css> | ||
| <html><![CDATA[ | ||
| Click anywhere! | ||
| <div class="elem"></div> | ||
| ]]></html> | ||
| <code><![CDATA[ | ||
| $.effects.define( "fade", "toggle", function( options, done ) { | ||
| var show = options.mode === "show"; | ||
|
|
||
| $( this ) | ||
| .css( "opacity", show ? 0 : 1 ) | ||
| .animate( { | ||
| opacity: show ? 1 : 0 | ||
| }, { | ||
| queue: false, | ||
| duration: options.duration, | ||
| easing: options.easing, | ||
| complete: done | ||
| } ); | ||
| } ); | ||
|
|
||
| $( document ).on( "click", function() { | ||
| $( ".elem" ).toggle( "fade" ); | ||
| } ); | ||
| ]]></code> | ||
| </example> | ||
| <category slug="effects-core"/> | ||
| <category slug="effects"/> | ||
| </entry> | ||
| </entries> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <?xml version="1.0"?> | ||
| <entries> | ||
| <entry type="method" name="jQuery.effects.removePlaceholder" added="1.12"> | ||
| <title>jQuery.effects.removePlaceholder()</title> | ||
| <signature> | ||
| <argument name="element" type="jQuery"> | ||
| <desc>The original element that has an associated placeholder.</desc> | ||
| </argument> | ||
| </signature> | ||
| <desc>Removes a placeholder created with <a href="/jQuery.effects.createPlaceholder/"><code>jQuery.effects.createPlaceholder()</code></a>.</desc> | ||
| <longdesc> | ||
| <p>Removes the placeholder for an element. This method is safe to call even if <a href="/jQuery.effects.createPlaceholder/"><code>jQuery.effects.createPlaceholder()</code></a> did not create a placeholder.</p> | ||
| </longdesc> | ||
| <category slug="effects-core"/> | ||
| <category slug="effects"/> | ||
| </entry> | ||
| </entries> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <?xml version="1.0"?> | ||
| <entries> | ||
| <entry type="method" name="jQuery.effects.restoreStyle" added="1.12"> | ||
| <title>jQuery.effects.restoreStyle()</title> | ||
| <signature> | ||
| <argument name="element" type="jQuery"> | ||
| <desc>The element to restore styles for.</desc> | ||
| </argument> | ||
| </signature> | ||
| <desc>Restores all inline styles for an element.</desc> | ||
| <longdesc> | ||
| <p>Restores all inline styles for an element which have been saved using <a href="/jQuery.effects.saveStyle/"><code>jQuery.effects.saveStyle()</code></a>.</p> | ||
| </longdesc> | ||
| <category slug="effects-core"/> | ||
| <category slug="effects"/> | ||
| </entry> | ||
| </entries> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <?xml version="1.0"?> | ||
| <entries> | ||
| <entry type="method" name="jQuery.effects.saveStyle" added="1.12"> | ||
| <title>jQuery.effects.saveStyle()</title> | ||
| <signature> | ||
| <argument name="element" type="jQuery"> | ||
| <desc>The element to save styles for.</desc> | ||
| </argument> | ||
| </signature> | ||
| <desc>Saves all inline styles applied to an element.</desc> | ||
| <longdesc> | ||
| <p>Saves all inline styles applied to an element. This is useful when animating various styles and restoring the existing styles at the end. The saved styles can be restored using <a href="/jQuery.effects.restoreStyle/"><code>jQuery.effects.restoreStyle()</code></a>.</p> | ||
| <p>When using <a href="/jQuery.effects.define/"><code>jQuery.effects.define()</code></a> to create an effect, if <code>jQuery.effects.saveStyle()</code> is used on the main element being animated, the styles will be restored automatically when the animation is complete.</p> | ||
| </longdesc> | ||
| <category slug="effects-core"/> | ||
| <category slug="effects"/> | ||
| </entry> | ||
| </entries> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <?xml version="1.0"?> | ||
| <entries> | ||
| <entry type="method" name="jQuery.effects.scaledDimensions" return="Object" added="1.12"> | ||
| <title>jQuery.effects.scaledDimensions()</title> | ||
| <signature> | ||
| <argument name="element" type="jQuery"> | ||
| <desc>The element to scale.</desc> | ||
| </argument> | ||
| <argument name="percent" type="Number"> | ||
| <desc>The percentage of the original size that the element's dimensions should be scaled to.</desc> | ||
| </argument> | ||
| <argument name="direction" type="String" optional="true"> | ||
| <desc>Which direction to scale the element's dimensions; either <code>"horizontal"</code> or <code>"vertical"</code>. If <code>direction</code> is omitted, both dimensions will be scaled.</desc> | ||
| </argument> | ||
| </signature> | ||
| <desc>Scales the dimensions of an element.</desc> | ||
| <longdesc> | ||
| <p>This method scales the dimensions of an element, returning an object containing <code>height</code>, <code>width</code>, <code>outerHeight</code>, and <code>outerWidth</code> properties. The element is not actually modified.</p> | ||
| </longdesc> | ||
| <category slug="effects-core"/> | ||
| <category slug="effects"/> | ||
| </entry> | ||
| </entries> |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to explain what "save" means here. As far as I can tell it stores a copy of
style.cssTextvia.data(), without making any changes to the styles itself.Also applies to
restoreStyle.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The how is pure internal details. The only thing the user should care about is how to restore the styles that have been saved, which is documented.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Its not just internal details. The semantics of the method were unclear to me until I read the code, which makes for bad documentation.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you explain what semantics were unclear?