REFERENCE - ANIMATION

The following reference chart offers a good guideline on ... When do we animate what ?
NAVIGATION
Navigation MenuBar NavigBar SlideMenu TabMenu TextMenu
left wb id id wb wb
top wb id id wb wb
width wb+ wb+
height wb+ wb+
opacity wb id id wb wb
borderWidth
fontSize id wb + elem
margin wb id id wb
marginBottom
marginTop wb id id wb wb
marginLeft wb id id wb wb
marginRight
rotate •• •• •• wb ••
skew •• •• •• wb ••
scale •• •• •• wb ••
    
color wb + elem
backgroundcolor wb id id wb
borderBottomColor id
borderTopColor
borderLeftColor
borderRightColor
    
draggable wb id id wb wb
resizable
    
All: font-color & font-size do not work with doctype set to XHTML
TextMenu: font-size = ONLY use without background-color active.
TextMenu: font-color = ONLY use this selector for color animation (+ font backgroundColor is possible).
EXTRA
Extra Banner ImageMap PhotoGal Marquee
left id wb wb id
top id wb wb id
width id id wb+ id
height id id wb+ id
opacity id (wb) wb id
borderWidth id id
fontSize wb + elem id + elem
margin id (wb) wb id
marginBottom
marginTop id (wb) wb id
marginLeft id (wb) wb id
marginRight
rotate •• id id ••
skew •• id id ••
scale •• id id ••
   
color wb + elem wb + elem
backgroundcolor id wb id
borderBottomColor id id
borderTopColor id id
borderLeftColor id id
borderRightColor id id
   
draggable id wb wb wb
resizable wb + id
   
All: set wb_ as selector and id as resize also | selector
All: font-color & font-size do not work with doctype set to XHTML
All: font-color = ONLY use this selector for color animation (+ font backgroundColor is possible).
PhotoGal: font-size = ONLY use without background-color active.
multiple selector -(wb): but don't use multiple selectors on margin or opacity (no: #wb_Object1, #Object1).
FORM
Form Form AdvButton Checkbox Editbox imagebutton Textarea
left wb id id id id id
top wb id id id id id
width wb id id id id id
height wb id id id id id
opacity wb id id id id id
borderWidth wb id id id
fontSize id + elem id id
margin wb id id id id id
marginBottom
marginTop wb id id id id id
marginLeft wb id id id id id
marginRight
rotate •• •• •• •• •• ••
skew •• •• •• •• •• ••
scale •• •• •• •• •• ••
     
color id + elem id id
backgroundcolor wb id id id id
borderBottomColor wb id id id
borderTopColor wb id id id
borderLeftColor wb id id id
borderRightColor wb id id id
     
draggable wb id id id id id
resizable wb
     
All: font-color & font-size do not work with doctype set to XHTML
opacity -- ***: no opacity animation if content needs to pass it's border.
wb
id

wb + id
+ elem
=  add wb_ to the objects id
=  only use the objects id
=  on a
resizable the: selector is #wb_MyObject - the resize also | selector is #MyObject
=  use id or wb  and element at the same time ie. selector 
#wb_TextMenu1 span. (or a or .style1)
EXPLAIN REFERENCE CHART
=  both selectors (wb and id) can be used at the same time, ie. #wb_Object, #Object
    BUT don't use both on
margin or opacity animation, the selector should then be #wb_Object
=  don't animate opacity if the content needs to move beyond it's border
wb+ or  id+
••
ADVANCED+
Advanced+ InlineFrame YouTube Layer MasterPage
left id wb id wb
top id wb id wb
width id id B4
height id id B4
opacity id wb id wb
borderWidth id id
fontSize
margin id wb id wb
marginBottom
marginTop id wb id wb
marginLeft id wb id wb
marginRight
rotate •• •• •• ••
skew •• •• •• ••
scale •• •• •• ••
   
color
backgroundcolor id wb
borderBottomColor id id
borderTopColor id id
borderLeftColor id id
borderRightColor id id
   
draggable wb id wb
resizable id wb
   
opacity -- ***: no opacity animation if content needs to pass it's border
B4: set overflow to hidden (width+height)-- easy tools |  page load
DRAWING+
Drawing+ Shape ClipArt TextArt Image Text BullitedList
left wb wb wb wb wb wb
top wb wb wb wb wb wb
width id id id id wb+ wb+
height id id id id wb+ wb+
opacity (wb) (wb) (wb) (wb) wb wb
borderWidth id id id id
fontSize wb + elem wb + elem
margin (wb) (wb) (wb) (wb) wb wb
marginBottom
marginTop (wb) (wb) (wb) (wb) wb wb
marginLeft (wb) (wb) (wb) (wb) wb wb
marginRight
rotate id id id id •• id
skew id id id id •• id
scale id id id id •• id
     
color wb + elem wb + elem
backgroundcolor id id id id wb wb
borderBottomColor id id id id
borderTopColor id id id id
borderLeftColor id id id id
borderRightColor id id id id
     
draggable wb wb wb wb wb wb
resizable wb + id wb + id wb + id wb + id
     
All: set wb_ as selector and id as resize also | selector
All: font-color & font-size do not work with doctype set to XHTML
All: font-size = ONLY use without background-color active.
All: font-color = ONLY use this selector for color animation (+ font backgroundColor is possible).
multiple selector -(wb): but don't use multiple selectors on margin or opacity (no: #wb_Object1, #Object1).
=  to animate width & height complete set the overflow to hidden with add action | before
=  rotate, skew and scale is only (cross-browser).possible on child elements
   
!NEW! jor_aniMateMASTERPACKv3.0 automatically adjust for transformation animation in   module | OnLoad
                set the property   code modification | wrap   to   true   ( prefix is   #jorpar_ )
                or use   easy tools | parent   to wrap objects inside a div ( prefix is #jorpar_ )
    NOTE: on some elements, border is not possible (ie. iFrame, Marquee -- experiment)
    NOTE:  Q:  do I use  wb_  or  id ?
                A:  look at the overall state of the object (ie. left=wb then target most likely=wb)
ADVANCED+
InlineFrame - YouTube - Layer - MasterPage
DRAWING+
Shape - ClipArt - TextArt - Image - Text - BullitedList
NAVIGATION
GoMenu - MenuBar - NavigationButton - SlideMenu - TabMenu - TextMenu
EXTRA
Banner - ImageMap - PhotoGallery - Marquee
FORM
Form - AdvancedButton - CheckBox - EditBox - ImageButton - TextArea

EXPLAN REFERENCE CHART