Allow to animate the style of a HTML element on a certain action (hover, click etc). You can use pre-built animation or craft your own. Note: Colors related animatable styles are only available if jQuery-ui is used. Built-in animations * fade_out * fade_in * size_on_hover Animate the size of the element when hovering it to a specified width / height target value, the element return to its initial size (if there is any) when the mouse is not hovering it anymore. Example: jquery_animate ( element(htmlId("my_element")), size_on_hover(32, 32, 1000, 1000) ) * custom Can be used to craft your own animation. - You can make simple animation like this (transition the background color to green on a click): jquery_animate ( element(htmlId("my_element")), custom(onclick, background_color(rgb(0, 255, 0)), linear, 1000) ) - Or you can make something more complex which use all capabilities, like this custom made "size_on_hover" animation jquery_animate ( element(htmlId("my_element")), [ custom(id("_over"), onmouseover, [ id("_out") ], [width(64), height(64)], easeOutBack, 1000), custom( id("_out"), // id used to identify this animation onmouseout, // animation triggering html event [ id("_hover")], // a list of ids, used to stop others animations to play when this one is triggered [], // empty list of styles mean it will animate back to the initial state of the element easeOutElastic, // easing equation 1000 // duration ) ] ) Which is similar to: size_on_hover(64, 64, 1000, 1000) TODO: Choice of an animation target using a selector Chained animation Author: Julien Verneuil (25/04/2015) read tools/basis.anubis read tools/printable_tree.anubis read calexium_lib/web/CXM_making_a_web_site.anubis read calexium_lib/web/CXM_json.anubis read calexium_lib/web/CXM_jquery.anubis read calexium_lib/web/jQuery/CXM_jquery_easing.anubis read calexium_lib/web/CXM_style_tools.anubis read calexium_lib/web/js_tools.anubis public type AnimatableCSSStyle: width(Int value), height(Int value), max_width(Int value), max_height(Int value), min_width(Int value), min_height(Int value), outline_width(Int value), border_width(Int value), border_top_width(Int value), border_right_width(Int value), border_bottom_width(Int value), border_left_width(Int value), top(Int value), right(Int value), left(Int value), bottom(Int value), margin_top(Int value), margin_right(Int value), margin_left(Int value), margin_bottom(Int value), padding_top(Int value), padding_right(Int value), padding_left(Int value), padding_bottom(Int value), font_size(Int value), line_height(Int value), letter_spacing(Int value), border_spacing(Int value), text_indent(Int value), word_spacing(Int value), z_index(Int value), outline_color(RGBA color), border_color(RGBA color), border_top_color(RGBA color), border_right_color(RGBA color), border_bottom_color(RGBA color), border_left_color(RGBA color), background_color(RGBA color), color(RGBA color), opacity(Float value). public type JQueryAnimationId: id(String id). public type JQueryAnimation: fade_out(HtmlEvents trigger, JQueryEasing type, Int duration), fade_in(HtmlEvents trigger, JQueryEasing type, Int duration), size_on_hover(Int width, Int height, Int duration_ms_on, Int duration_ms_out), custom(HtmlEvents trigger, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms), custom(HtmlEvents trigger, List(JQueryAnimationId) stop_anims_id, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms), custom(JQueryAnimationId id, HtmlEvents trigger, List(JQueryAnimationId) stop_anims_id, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms), custom(JQueryAnimationId id, HtmlEvents trigger, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms). type JQueryFormattedAnimation: formatted_animation(String id, String trigger_name, JsonValue stop_anim_id, JsonValue css_props, JsonValue options). define HTML_Head_Tag required_js = js(js_file("js/cxm/cxm_jquery_animate.js")). define String js_anim_function_name = "CalexiumToolBox.CXM_Animate.animate". define String format_html_event_to_js ( HtmlEvents ev ) = if ev is { onchange then "change", onsubmit then "submit", onreset then "reset", onselect then "select", onblur then "blur", onfocus then "focus", onkeydown then "keydown" onkeypress then "keypress", onkeyup then "keyup", onclick then "click", ondblclick then "dblclick", onmousedown then "mousedown", onmousemove then "mousemove", onmouseout then "mouseout", onmouseover then "mouseover", onmouseup then "mouseup" }. define List(JsonMember) animatables_to_json_members ( List(AnimatableCSSStyle) styles, List(JsonMember) json_members ) = if styles is { [ ] then json_members, [ animatable_style . t ] then with json_member = if animatable_style is { width(value) then json_member("width", json_int(value)), height(value) then json_member("height", json_int(value)), max_width(value) then json_member("max-width", json_int(value)), max_height(value) then json_member("max-height", json_int(value)), min_width(value) then json_member("min-width", json_int(value)), min_height(value) then json_member("min-height", json_int(value)), outline_width(value) then json_member("outline-width", json_int(value)), border_width(value) then json_member("border-width", json_int(value)), border_top_width(value) then json_member("border-top-width", json_int(value)), border_right_width(value) then json_member("border-right-width", json_int(value)), border_bottom_width(value) then json_member("border-bottom-width", json_int(value)), border_left_width(value) then json_member("border-left-width", json_int(value)), top(value) then json_member("top", json_int(value)), right(value) then json_member("right", json_int(value)), left(value) then json_member("left", json_int(value)), bottom(value) then json_member("bottom", json_int(value)), margin_top(value) then json_member("margin-top", json_int(value)), margin_right(value) then json_member("margin-right", json_int(value)), margin_left(value) then json_member("margin-left", json_int(value)), margin_bottom(value) then json_member("margin-bottom", json_int(value)), padding_top(value) then json_member("padding-top", json_int(value)), padding_right(value) then json_member("padding-right", json_int(value)), padding_left(value) then json_member("padding-left", json_int(value)), padding_bottom(value) then json_member("padding-bottom", json_int(value)), font_size(value) then json_member("font-size", json_int(value)), line_height(value) then json_member("line-height", json_int(value)), letter_spacing(value) then json_member("letter-spacing", json_int(value)), border_spacing(value) then json_member("border-spacing", json_int(value)), text_indent(value) then json_member("text-indent", json_int(value)), word_spacing(value) then json_member("word-spacing", json_int(value)), z_index(value) then json_member("z-index", json_int(value)), outline_color(color) then json_member("outline-color", json_string(format_rgba_to_style_color(color))), border_color(color) then json_member("border-color", json_string(format_rgba_to_style_color(color))), border_top_color(color) then json_member("border-top-color", json_string(format_rgba_to_style_color(color))), border_right_color(color) then json_member("border-right-color", json_string(format_rgba_to_style_color(color))), border_bottom_color(color) then json_member("border-bottom-color", json_string(format_rgba_to_style_color(color))), border_left_color(color) then json_member("border-left-color", json_string(format_rgba_to_style_color(color))), background_color(color) then json_member("background-color", json_string(format_rgba_to_style_color(color))), color(color) then json_member("color", json_string(format_rgba_to_style_color(color))), opacity(value) then json_member("opacity", json_float(value, 8)) }, animatables_to_json_members(t, [ json_member . json_members]) }. define List(JsonMember) animatables_to_json_members ( List(AnimatableCSSStyle) styles ) = animatables_to_json_members(styles, [ ]). define JQueryFormattedAnimation format_animation ( JQueryAnimationId id, HtmlEvents trigger, List(JQueryAnimationId) stop_anims_id, List(AnimatableCSSStyle) styles, JQueryEasing type, Int duration_ms ) = with css_props_as_json_members = animatables_to_json_members(styles), easing_str = format_easing(type), trigger_str = format_html_event_to_js(trigger), id_str = if id is id(id_str) then id_str, formatted_animation( id_str, trigger_str, json_array( map((JQueryAnimationId e) |-> if e is { id(id_str) then json_string(id_str) }, stop_anims_id) ), json_object(css_props_as_json_members), json_object( [ json_member("duration", json_int(duration_ms)), json_member("easing", json_string(easing_str)) ] ) ). define JQueryFormattedAnimation format_animation ( HtmlEvents trigger, List(JQueryAnimationId) stop_anims_id, List(AnimatableCSSStyle) styles, JQueryEasing type, Int duration_ms ) = format_animation(id(""), trigger, stop_anims_id, styles, type, duration_ms). define JQueryFormattedAnimation format_animation ( JQueryAnimationId id, HtmlEvents trigger, List(AnimatableCSSStyle) styles, JQueryEasing type, Int duration_ms ) = format_animation(id, trigger, [ ], styles, type, duration_ms). define JQueryFormattedAnimation format_animation ( HtmlEvents trigger, List(AnimatableCSSStyle) styles, JQueryEasing type, Int duration_ms ) = format_animation(id(""), trigger, [ ], styles, type, duration_ms). define List(JQueryFormattedAnimation) format_animation ( JQueryAnimation anim_type ) = if anim_type is { fade_out(trigger, easing, duration) then [ format_animation(trigger, [opacity(0)], easing, duration) ], fade_in(trigger, easing, duration) then [ format_animation(trigger, [opacity(1)], easing, duration) ], size_on_hover(w, h, d_in, d_out) then [ format_animation(id("_over"), onmouseover, [ id("_out") ], [width(w), height(h)], easeOutBack, d_in), format_animation(id("_out"), onmouseout , [ id("_over") ], [] , easeOutElastic, d_out) ], custom(trigger, styles, easing_type, duration_ms) then [ format_animation(trigger, styles, easing_type, duration_ms) ] custom(trigger, stop_anims_id, styles, easing_type, duration_ms) then [ format_animation(trigger, stop_anims_id, styles, easing_type, duration_ms) ] custom(id,trigger,stop_anims_id,styles,easing_type,duration_ms) then [ format_animation(id, trigger, stop_anims_id, styles, easing_type, duration_ms) ] custom(id,trigger,styles,easing_type,duration_ms) then [ format_animation(id, trigger, styles, easing_type, duration_ms) ] }. define List(JQueryFormattedAnimation) format_animations ( List(JQueryFormattedAnimation) formatted_anims, List(JQueryAnimation) anims ) = if anims is { [ ] then formatted_anims, [ anim . t ] then format_animations(formatted_anims + format_animation(anim), t) }. define List(JsonValue) generate_js ( List(JQueryFormattedAnimation) formatted_anims, List(JsonValue) anim_objects ) = if formatted_anims is { [ ] then anim_objects, [ formatted_anim . t ] then if formatted_anim is { formatted_animation(id_str, trigger_str, stop_anims_id_as_json_array, css_props, options) then generate_js( t, [ json_object( [ json_member("id", id_str), json_member("event", trigger_str), json_member("stop_anims_id", stop_anims_id_as_json_array), json_member("props", css_props), json_member("options", options) ] ) . anim_objects ] ) } }. public define List(HTML_Head_Tag) generate_head_tags ( JQuerySelector jq_selector, List(JQueryAnimation) anims ) = [ required_js, js_inline( jquery_ready( format_js_function_call( js_anim_function_name, [ format_jquery_selector(jq_selector), to_javascript( json_array( generate_js( format_animations([ ], anims), [ ] ) ) ) ] ) ) ) ]. public define List(HTML_Head_Tag) jquery_animate ( JQuerySelector jq_selector, List(JQueryAnimation) anims ) = generate_head_tags(jq_selector, anims). public define HTML_Partial_Content jquery_animate ( JQuerySelector jq_selector, List(JQueryAnimation) anims ) = partial_content(generate_head_tags(jq_selector, anims), literal("")). public define List(HTML_Head_Tag) jquery_animate ( JQuerySelector jq_selector, JQueryAnimation anim_type ) = generate_head_tags(jq_selector, [ anim_type ]). public define HTML_Partial_Content jquery_animate ( JQuerySelector jq_selector, JQueryAnimation anim_type ) = partial_content(generate_head_tags(jq_selector, [ anim_type ]), literal("")).