Graphics Reference
In-Depth Information
or in shorthand:
sym.getSymbol("MySymbol").$(:RectB").hide();
As mentioned earlier, a symbol instance has no visible elements. However,
the symbol container is also a DOM element, namely an invisible DIV container.
This is needed for functions such as grouping and moving all symbol content. In
addition, this container defines overflow and corresponding scroll behavior. In a
few cases, it may be necessary to access this container as an element. To do this,
you can use the getSymbolElement() symbol function:
// Call JQuery handle for the element of a
// JavaScript object for Edge Animate symbol.
var symbolElement = sym.getSymbolElement();
5.5.6 Modifying Elements
Let's look at the various ways to modify existing elements. While for symbols we
mostly looked at controlling the Timelines, elements are more about changing
visual appearance. Since an element reference is a jQuery object that is also
depicted in the DOM (as for every classic HTML website), we have use of nearly
all options available through jQuery and CSS. Let's first look at Edge Animate's
action code snippets. The following actions apply to basic shapes, text elements,
and images.
Any element can be hidden using the function hide() and displayed again
using the function show() .
// Hide element.
sym.$("myRectangle").hide();
sym.$("myText").hide();
sym.$("myImage").hide();
// Show element.
sym.$("myRectangle").show();
Of course, you can also use other jQuery effects that are not available from Edge
Animate as action code snippets, such as letting individual elements appear and
disappear abruptly, or fly into the image from above. Such effects can be achieved
with the functions slideUp(), slideDown() and slideToggle() :
// Move element in and out from the top.
sym.$("Text1").slideUp();
sym.$("Text1").slideDown();
sym.$("Text1").slideToggle();
 
Search WWH ::




Custom Search