An important example would be a stop( ) action, if we would ie. animate a mouse-hover (mouseover, mouseout)
We want the animation that executes at mouseout to start at that moment,
so we first want the animation that we started on mouseover to stop
That's when we want to use a stop( ) action
But there are many other uses for this property
We want the animation that executes at mouseout to start at that moment,
so we first want the animation that we started on mouseover to stop
That's when we want to use a stop( ) action
But there are many other uses for this property
ADD ACTION | AFTER
add action | after is yet another way to add code to the existing code, it will execute code after the animation
The code that execute without is structured like this
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action)
------------------------------------------------------------------------------------------------------
With add action | after we can add to that code like this
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action).action after
------------------------------------------------------------------------------------------------------
add action | after is yet another way to add code to the existing code, it will execute code after the animation
The code that execute without is structured like this
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action)
------------------------------------------------------------------------------------------------------
With add action | after we can add to that code like this
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action).action after
------------------------------------------------------------------------------------------------------
ADD ACTION ADVANCED USE
ADD ACTION | BEFORE - content().find('mySelector')
With add action | before we can even reach cross-window by using .content( ).find( )
This is especially useful if applied to iFrame's
Here are some advanced examples. (=module OnLoad)
EXAMPLES
1. target a Shape1 inside an iframe, from the main page
identifier : my animation notes
delay : 0
== PARENT or 1st ================= ==============================
selector : #myIFRAME
action 1 | action : left
action 1 | value : 200
...
add action | before : .contents().find('#wb_Shape1')
...
2. target a Shape1 on the main page, from inside an iframe
identifier : my animation notes
delay : 0
== PARENT or 1st ================= =============================
selector : parent.document
action 1 | action : left
action 1 | value : 200
... :
add action | before : .contents().find('#wb_Shape1')
...
With parent.document we target outside of the iframe onto the document
3. target a Shape1 inside an iframe, from another iframe
identifier : my animation notes
delay : 0
== PARENT or 1st ================= =============================
selector : '#myIFRAME2',parent.document
action 1 | action : left
action 1 | value : 200
... :
add action | before : .contents().find('#wb_Shape1')
...
With '#myIFRAME2',parent.document we target outside the iframe, onto the document, into the iframe with the selector myIFRAME2
NOTE: the iframe name IS tagged, it IS '#myIFRAME',parent.document not #myIFRAME,parent.document
ANOTHER WAY OF CROSS-WINDOW INTERACTION
We can also trigger functions, by calling them cross-window
We can use ie. a callback function to call functions in this way
Here are examples of how this can be done, from a callback function
1. target a Function inside an iframe, from the main page
callback | function : frames.IFRAME_NAME.FUNTION_NAME()
2. target a Function on the main page, from inside an iframe
callback | function : parent.FUNTION_NAME()
3. target a Function inside an iframe, from another iframe
callback | function : parent.frames.IFRAME_NAME.FUNTION_NAME()
NOTE:
jQuery is not supposed to be a cross-window script, but a single window script
Working this way can/will surely create it's problems, but used in a simple manner, it can be a nice addition
ADD ACTION | BEFORE - content().find('mySelector')
With add action | before we can even reach cross-window by using .content( ).find( )
This is especially useful if applied to iFrame's
Here are some advanced examples. (=module OnLoad)
EXAMPLES
1. target a Shape1 inside an iframe, from the main page
identifier : my animation notes
delay : 0
== PARENT or 1st ================= ==============================
selector : #myIFRAME
action 1 | action : left
action 1 | value : 200
...
add action | before : .contents().find('#wb_Shape1')
...
2. target a Shape1 on the main page, from inside an iframe
identifier : my animation notes
delay : 0
== PARENT or 1st ================= =============================
selector : parent.document
action 1 | action : left
action 1 | value : 200
... :
add action | before : .contents().find('#wb_Shape1')
...
With parent.document we target outside of the iframe onto the document
3. target a Shape1 inside an iframe, from another iframe
identifier : my animation notes
delay : 0
== PARENT or 1st ================= =============================
selector : '#myIFRAME2',parent.document
action 1 | action : left
action 1 | value : 200
... :
add action | before : .contents().find('#wb_Shape1')
...
With '#myIFRAME2',parent.document we target outside the iframe, onto the document, into the iframe with the selector myIFRAME2
NOTE: the iframe name IS tagged, it IS '#myIFRAME',parent.document not #myIFRAME,parent.document
ANOTHER WAY OF CROSS-WINDOW INTERACTION
We can also trigger functions, by calling them cross-window
We can use ie. a callback function to call functions in this way
Here are examples of how this can be done, from a callback function
1. target a Function inside an iframe, from the main page
callback | function : frames.IFRAME_NAME.FUNTION_NAME()
2. target a Function on the main page, from inside an iframe
callback | function : parent.FUNTION_NAME()
3. target a Function inside an iframe, from another iframe
callback | function : parent.frames.IFRAME_NAME.FUNTION_NAME()
NOTE:
jQuery is not supposed to be a cross-window script, but a single window script
Working this way can/will surely create it's problems, but used in a simple manner, it can be a nice addition
An example would be ie. a hide( ) action.
If we ie. animate a button that sets it's opacity to 0, and underneath it, we have another button, we can not access this second button,
cause the first button, although not visible, is still on stage, for this we could use ie. a hide(1) action
But there are many other uses for this property
NOTE: the code needs to starts with a . (=point) and each following is separated by a point
Other examples: fadeIn, fadeOut, fadeTo, slideIn, slideOut, slideToggle, show, hide, stop, css(), attr() etc etc
IMPORTANT: although add action | after code is written after the animation code and therefore executes after the animation code
the animation code in itself may still run after the add action | after function
a far more saver solution to run a function after the animation is to use the callback | function
If we ie. animate a button that sets it's opacity to 0, and underneath it, we have another button, we can not access this second button,
cause the first button, although not visible, is still on stage, for this we could use ie. a hide(1) action
But there are many other uses for this property
NOTE: the code needs to starts with a . (=point) and each following is separated by a point
Other examples: fadeIn, fadeOut, fadeTo, slideIn, slideOut, slideToggle, show, hide, stop, css(), attr() etc etc
IMPORTANT: although add action | after code is written after the animation code and therefore executes after the animation code
the animation code in itself may still run after the add action | after function
a far more saver solution to run a function after the animation is to use the callback | function
advanced!
No Quick Link
No Quick Link
No Quick Link
No Quick Link
No Quick Link
IN DEPTH - ADD ACTION BEFORE - AFTER - TO
ADD ACTION
ADD ACTION | TO
ADD ACTION | TO
An example would be ie. ,opacity:('1.0') this would animate the selector to full opacity
Or a more practical example would be a border color animation, module | OnLoad allows 3 color animation on the 1st animator
But border color animation is divided into 4 attributes: borderTopColor, borderBottomColor, borderRightColor and borderLeftColor
We can use add action | to to overcome this limitation, by adding the code in our self
The code for this example could be something like:
,borderTopColor:'red',borderBottomColor:'#FFF',borderRightColor:'#FFFFFF',borderLeftColor:'red'
This would color animate all 4 sides in one action
But there are many other uses for this property
Or a more practical example would be a border color animation, module | OnLoad allows 3 color animation on the 1st animator
But border color animation is divided into 4 attributes: borderTopColor, borderBottomColor, borderRightColor and borderLeftColor
We can use add action | to to overcome this limitation, by adding the code in our self
The code for this example could be something like:
,borderTopColor:'red',borderBottomColor:'#FFF',borderRightColor:'#FFFFFF',borderLeftColor:'red'
This would color animate all 4 sides in one action
But there are many other uses for this property
The code that execute without is structured like this
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action)
------------------------------------------------------------------------------------------------------
With add action | before we can add to that code like this
------------------------------------------------------------------------------------------------------
SELECTOR --- .action before(.ANIMATE action 1, action 2, color action)
------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action)
------------------------------------------------------------------------------------------------------
With add action | before we can add to that code like this
------------------------------------------------------------------------------------------------------
SELECTOR --- .action before(.ANIMATE action 1, action 2, color action)
------------------------------------------------------------------------------------------------------
NOTE: the code needs to starts with a . (=point) and each following is separated by a point
Other examples: fadeIn, fadeOut, fadeTo, slideIn, slideOut, slideToggle, show, hide, stop, css(), attr() etc etc
Other examples: fadeIn, fadeOut, fadeTo, slideIn, slideOut, slideToggle, show, hide, stop, css(), attr() etc etc
With add action | to additional actions can be added to execute at the same time
The code that execute without is structured like this
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action)
------------------------------------------------------------------------------------------------------
The code that execute without is structured like this
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action)
------------------------------------------------------------------------------------------------------
With add action | to we can add to that code like this
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action, another action, another action, etc)
------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------
SELECTOR --- (ANIMATE action 1, action 2, color action, another action, another action, etc)
------------------------------------------------------------------------------------------------------
NOTE: the code needs to starts with a , (=comma) and each following is separated by a comma
Other examples: left, top, width, height, opacity, margin, color, backgroundColor etc etc
Other examples: left, top, width, height, opacity, margin, color, backgroundColor etc etc
ADD ACTION | BEFORE
add action | before is also a method to add actions to the existing code, it will execute code before the animation