Description

A pEls is a element container providing a functionality similar to jQuery but, unlike JQuery, pEls supports both DOM and virtual elements.

pEls are useful when there are multiple animations on the same element set or to users that are used to use jQuery.

During teleportation, it will set the animation selector to the pEls selector.
This process will slow down the computation, since it must generate the jQuery for every animation but it will guarantee that is teleportable.

A pEls is created via Scene.getPEls and its selector is immutable.

Example

 // a DOM scene
 var scene1 = story.scenes[0];
 var pEls = scene1.getPEls('#message, #square,.circle');
 pEls.fadeIn();

// a virtual elements on a DOM scene.  
// requires story.onGetVirtualElement to be set for a VirtualElement factory
 var scene2 = story.scenes[0];
 var pEls2 = scene2.getPEls('%liver, %lungs');
 pEls2.fadeIn();

see: animate-wrappers.

 

API

 

pEls

public export interface

export interface pEls{ }

pEls.fadeIn()

public method [pEls]

fadeIn(duration?: TimeHandler): pEls;

Wrapper for scene.addAnimation with visible = false, followed by opacity moving to 1.

pEls.fadeOut()

public method [pEls]

fadeOut(duration?: TimeHandler): pEls;

Wrapper for scene.addAnimation with opacity moving to 0, followed by visible = false.

pEls.show()

public method [pEls]

show(): pEls;

Shows all the elements owned by pEls.

pEls.hide()

public method [pEls]

hide(): pEls;

Hides all the elements owned by pEls.

pEls.text()

public method [pEls]

text(text: string): pEls;

Sets the text of all the elements owned by pEls.