pax.fx

This class allows various effects and graphical attribues of CSS classes to be manipulated, and multiple effects to be applied to one or more DOM elements; it utalises tweening, which allows good control over animations and effects.

Note: You should use pax.fx.init for all FX functions!!!

Author

Mikkel Bergmann, http://www.pointful.com

Summary
pax.fxThis class allows various effects and graphical attribues of CSS classes to be manipulated, and multiple effects to be applied to one or more DOM elements; it utalises tweening, which allows good control over animations and effects.
Functions
pax.fx.initInitialises an effect, and adds it to the efefcts dictionary.
pax.fx.chainThis method runs any number of effects, one after the other.
pax.fx.yoyoInitialises an effect, and makes it continiously go forwards and backwards.
pax.fx.cancelAllCancels all ongoing effect on the given targets id
pax.css.opacitySets the opacity of an element
pax.fx.revealTo use this method, initialise via pax.fx.init.
pax.fx.colourFadeTo use this method, initialise via pax.fx.init.
pax.fx.opacityFadeTo use this method, initialise via pax.fx.init.
pax.fx.fadeInFades in an element in optional time miliseconds
pax.fx.fadeOutFades out an element in optional time miliseconds
pax.fx.moveTo use this method, initialise via pax.fx.init.
pax.fx.sizeTo use this method, initialise via pax.fx.init.
pax.fx.cursorPosGet co-ordinates of the mouse cursor
pax.fx.dragSets an element as draggable
pax.fx.dropSets an element as a drop target for a draggable element

Functions

pax.fx.init

pax.fx.init = function(target,
effect,
value,
duration,
direction,
callBack)

Initialises an effect, and adds it to the efefcts dictionary.

Parameters

targetElement ID of the DOM node we’re to apply the effect to
effectwhich effect to use
valueA value object the effect will use
durationDuration of the effect in milliseconds
directionDirection of effect, pass false to make it go backwards
callBackAn optional callback method for when the effect has finished.

Note

  • Effects can be chained, by using the callBack method, or better yet, the pax.fx.chain method
  • Simultaneous effects can be run
  • See the individual effects for examples

pax.fx.chain

pax.fx.chain = function(fxList)

This method runs any number of effects, one after the other.  Consecutive effects inherit prior effects parameters

Parameters

fxListList of effect init args to use

Example

<input type="button" id="moveBox" value="Animate!">

<div id='pax.fx.move.example1' style='position:absolute; overflow:hidden; background: #5555ff;
    color: white; border: 3px solid #111; left: 4px; top: 60px; width:200px; height: 160px'>
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
</div>
[:.
    var startPos = pax.util.getPosition( pax.$('pax.fx.move.example1'), false );
    var endPos = {x:startPos.x + 300, y:startPos.y + 150};
    var move = function() {
        pax.fx.chain( [
            {   target: 'pax.fx.move.example1',
                effect: 'move',
                value: {startPos: startPos, endPos: endPos },
                duration: 2000,
                direction: true
            },
            {   effect: 'move',
                value: {startPos: startPos, endPos: endPos },
                direction: false
            },
            {   effect: 'move',
                value: {startPos: startPos, endPos: {x:200} },
                direction: true,
                duration: 500
            },
            {   effect: 'colourFade',
                value: {startColour: '0000ff', endColour: 'ff0000'}
            },
            {   effect: 'opacityFade',
                value: {startOpacity: 0, endOpacity: 100},
                duration: 1000,
                direction: false
            },
            {   effect: 'opacityFade',
                value: {startOpacity: 0, endOpacity: 100},
                duration: 1000,
                direction: true
            },
            {   effect: 'move',
                value: {startPos: {x:200}, endPos: startPos },
                duration: 2000,
                direction: true
            }
        ] );
    };
    pax.$('moveBox').onclick = function() { move(); };
:]

pax.fx.yoyo

pax.fx.yoyo = function(target,
effect,
value,
duration,
direction)

Initialises an effect, and makes it continiously go forwards and backwards.

Parameters

targetelement to perform the effect on
effectwhich effect to use
valueobject to pass to the effect
durationhow long the effect goes for in milliseconds
directionwhich way the effect should start at, default = true = forwards, false = backwards.

Returns

A function to stop the yoyo action by

Example

<div id='pax.fx.move.example1' style='position:absolute; overflow:hidden; left: 4px; top: 60px;'>
    <img border=0 src='/pax/documentation/basketball.gif'>
</div>
[:.
    var startPos = pax.util.getPosition( pax.$('pax.fx.move.example1'), false );
    var endPos = {x:startPos.x, y:startPos.y + 250};
    var finishYoyo = pax.fx.yoyo( 'pax.fx.move.example1', 'move', {startPos: endPos, endPos: startPos }, 500 );
    exampleCleanup = function() {
        finishYoyo();
    };
:]

You will note that the yoyo function returns an function to stop the action by

Example

<input type="button" id="yoyoOpacity" value="opacityFade yoyo">
<input type="button" onclick="pax.fx.init( 'pax.fx.opacityFade.example1', 'opacityFade', {startOpacity: 0, endOpacity: 100}, 1000 );" value="opacityFade+">
<input type="button" onclick="pax.fx.init( 'pax.fx.opacityFade.example1', 'opacityFade', {startOpacity: 0, endOpacity: 100}, 1000, false );" value="opacityFade-">

<div id='pax.fx.opacityFade.example1' style='overflow:hidden; background: #0000ff; width:200px; height: 160px'>
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
</div>
[:.
    function yoyoOpacity() {
        var finishYoyo = pax.fx.yoyo( 'pax.fx.opacityFade.example1', 'opacityFade', {startOpacity: 0, endOpacity: 100}, 1000 );
        exampleCleanup = function() {
            finishYoyo();
        };
    }
    pax.$('yoyoOpacity').onclick = function() { yoyoOpacity(); };
:]

Example

<div id='pax.fx.move.example3' style='position:absolute; overflow:hidden; left: 4px; top: 60px;'>
    <img border=0 src='/pax/documentation/basketball.gif'>
</div>
[:.
    var startPos = pax.util.getPosition( pax.$('pax.fx.move.example3'), false );
    var endPos = {x:startPos.x, y:startPos.y + 250};
    var finishYoyo = pax.fx.yoyo( 'pax.fx.move.example3', 'move', {startPos: endPos, endPos: startPos }, 500 );
    var finishYoyo2 = pax.fx.yoyo( 'pax.fx.move.example3', 'opacityFade', {startOpacity: 0, endOpacity: 100}, 1000 );
    exampleCleanup = function() {
        finishYoyo();
        finishYoyo2();
    };
:]

You will note that the yoyo function returns an function to stop the action by

pax.fx.cancelAll

pax.fx.cancelAll = function(id)

Cancels all ongoing effect on the given targets id

Parameters

idThe unique ID of the DOM element the effect(s) are being applied to

pax.css.opacity

pax.css.opacity = function(element,
percent)

Sets the opacity of an element

Parameters

elementDOM pointer to the element we want to set the opacity of
percentpercentage of opacity

Example

<div id='pax.css.opacity.example1' style='background:#2233DD; border: 2px solid red'>This is a test</div>
[:.
    pax.css.opacity( pax.$('pax.css.opacity.example1'), 50 );
:]

Sets the opacity of an element.

pax.fx.reveal

pax.fx.reveal = function(val,
ele,
pct)

To use this method, initialise via pax.fx.init.  Reveals an element to a specified height, see pax.fx.init for details on how to use this.

Parameters

endSizeFinal height of element (start is assumed to be 0 and style.display=’none’)

WIP

  • Add ability to reveal by width as well

Example

<input type="button" onclick="pax.fx.init( 'pax.fx.reveal.example1', 'reveal', {endSize: 160}, 1000 );" value="reveal+">
<input type="button" onclick="pax.fx.init( 'pax.fx.reveal.example1', 'reveal', {endSize: 160}, 1000, false );" value="reveal-">

<span id='pax.fx.reveal.example1' style='display:none; overflow:hidden; background: #0000ff; width: 200px;border-bottom:1px solid #000'>
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
</span>

Note that the example uses the pax.fx.init method, which all effects should be doing.

pax.fx.colourFade

pax.fx.colourFade = function (val,
ele,
pct)

To use this method, initialise via pax.fx.init.  Fades between given background colours.

Parameters

startColourColour to start the fade at
endColourColour to finish the fade at

Example

<input type="button" onclick="pax.fx.init( 'pax.fx.colourFade.example1', 'colourFade', {startColour: '0000ff', endColour: 'ff0000'}, 1000 );" value="ColourFade+">
<input type="button" onclick="pax.fx.init( 'pax.fx.colourFade.example1', 'colourFade', {startColour: '0000ff', endColour: 'ff0000'}, 1000, false );" value="ColourFade-">

<div id='pax.fx.colourFade.example1' style='overflow:hidden; background: #0000ff; width:200px; height: 160px'>
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
</div>

Note that the example uses the pax.fx.init method, which all effects should be doing.

pax.fx.opacityFade

pax.fx.opacityFade = function (val,
ele,
pct)

To use this method, initialise via pax.fx.init.  Fades between opacity levels

Parameters

startOpacityOpacity to start the fade at
endOpacityOpacity to finish the fade at

Example

<input type="button" onclick="pax.fx.init( 'pax.fx.opacityFade.example1', 'opacityFade', {startOpacity: 0, endOpacity: 100}, 1000, false );" value="Fade out">
<input type="button" onclick="pax.fx.init( 'pax.fx.opacityFade.example1', 'opacityFade', {startOpacity: 0, endOpacity: 100}, 1000 );" value="Fade in">

<div id='pax.fx.opacityFade.example1' style='overflow:hidden; background: #0000ff; width:200px; height: 160px'>
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
</div>

Note that the example uses the pax.fx.init method, which all effects should be doing.

pax.fx.fadeIn

pax.fx.fadeIn = function(ele,
time,
callBack)

Fades in an element in optional time miliseconds

Parameters

eleelement to fade in
timetime in milliseconds to fade for, default time is 1000ms

Example

<div id='pax.fx.fadeIn.example1' style='MozOpacity:0;opacity:0;KhtmlOpacity:0;filter:alpha(opacity=0);'>
    <img border=0 src='/pax/documentation/basketball.gif'>
</div>
[:.
    pax.fx.fadeIn( 'pax.fx.fadeIn.example1' );
:]

pax.fx.fadeOut

pax.fx.fadeOut = function(ele,
time,
callBack)

Fades out an element in optional time miliseconds

Parameters

eleelement to fade out
timetime in milliseconds to fade for, default time is 1000ms

Example

<div id='pax.fx.fadeOut.example1'>
    <img border=0 src='/pax/documentation/basketball.gif'>
</div>
[:.
    pax.fx.fadeOut( 'pax.fx.fadeOut.example1' );
:]

pax.fx.move

pax.fx.move = function (val,
ele,
pct)

To use this method, initialise via pax.fx.init.  Moves an element from one spot to another

Parameters

startPosObject with {x, y} co-ords to start at
endPosObject with {x, y} co-ords to end at

Example

<input type="button" id="moveDown" value="Move down">
<input type="button" id="moveUp" value="Move up">
<input type="button" id="random" value="Random">

<div id='pax.fx.move.example1' style='position:absolute; overflow:hidden; background: #5555ff; color: white; border: 3px solid #111; left: 4px; top: 60px; width:200px; height: 160px'>
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
</div>
[:.
    var startPos = pax.util.getPosition( pax.$('pax.fx.move.example1'), false );
    var endPos = {x:startPos.x + 300, y:startPos.y + 150};
    var move = function( direction ) {
        pax.fx.init( 'pax.fx.move.example1', 'move', {startPos: startPos, endPos: endPos }, 1000, direction );
    };
    pax.$('moveDown').onclick = function() { move( true ); };
    pax.$('moveUp').onclick = function() { move( false ); };

    var random = function() {
        var endPos = {
            x: startPos.x + parseInt( Math.random() * 200),
            y: startPos.y + parseInt( Math.random() * 200)
        };
        var direction = (Math.random() > 0.5);
        pax.fx.init( 'pax.fx.move.example1', 'move', {startPos: startPos, endPos: endPos }, 1000, direction );
    };
    pax.$('random').onclick = function() { random(); };
:]

Note that the example uses the pax.fx.init method, which all effects should be doing, and it .

pax.fx.size

pax.fx.size = function (val,
ele,
pct)

To use this method, initialise via pax.fx.init.  Sizes an element from one size to another

Parameters

startSizeObject with {width, height} parameters to start at
endSizeObject with {width, height} parameters to end at

Example

<input type="button" id="sizeUp" value="size up">
<input type="button" id="sizeDown" value="size down">
<input type="button" id="random" value="Random">

<div id='pax.fx.size.example1' style='position:absolute; overflow:hidden; background: #5555ff; color: white; border: 3px solid #111; left: 4px; top: 60px; width:200px; height: 160px'>
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
    upsim lorum dorum bordum upsim lorum dorum bordum upsim lorum dorum bordum
</div>
[:.
    var startSize = pax.util.getPosition( pax.$('pax.fx.size.example1'), false );
    var endSize = {width:startSize.width + 300, height:startSize.height + 150};
    var size = function( direction ) {
        pax.fx.init( 'pax.fx.size.example1', 'size', {startSize: startSize, endSize: endSize }, 1000, direction );
    };
    pax.$('sizeDown').onclick = function() { size( false ); };
    pax.$('sizeUp').onclick = function() { size( true ); };

    var random = function() {
        var endSize = {
            width: startSize.width + parseInt( Math.random() * 200),
            height: startSize.height + parseInt( Math.random() * 200)
        };
        var direction = (Math.random() > 0.5);
        pax.fx.init( 'pax.fx.size.example1', 'size', {startSize: startSize, endSize: endSize }, 1000, direction );
    };
    pax.$('random').onclick = function() { random(); };
:]

Note that the example uses the pax.fx.init method, which all effects should be doing, and it .

pax.fx.cursorPos

pax.fx.cursorPos = function(event)

Get co-ordinates of the mouse cursor

Paramaters

eventthe event to find the cursor position with.

Returns

an object with the x, y co-ordinates of the cursor

WIP

  • Perhaps move to util class

pax.fx.drag

pax.fx.drag = function(element,
args)

Sets an element as draggable

Paramaters

eventthe event to find the cursor position of.
argsoptional argument object to pass to the drag function, ie: {}
  • constrain - either ‘vertical’ or ‘horizontal’, eg: {constrain: ‘vertical’}
  • grid - integer grid value, 0 = no grid, eg: {grid: 10}
  • box - limit where element can be dragged, can be the object returned by pax.util.getPosition, eg: {x:10, y:20, width:70, height:70} or co-ordinates, eg: {x:10, y:20, x2:80, y2:90}
  • snap - this will “snap” to a given “line”.
  • callStart - function to be called when a draggable object starts being dragged, paramater is an object {x,y,args}
  • callMove - function to be called when a draggable object is being dragged, paramater is an object {x,y,args}, be careful as it’s continiously being called
  • callBack - function to be called when a draggable object is dropped, paramater is an object {x,y,args}

Example

<span id="pax.fx.drag.vline" style="position:absolute;left:550px;width:0px;height:400px;border-left:1px solid #aaa;"></span>
<span id="pax.fx.drag.hline" style="position:absolute;left:525px;top:300px;width:400px;height:1px;border-top:1px solid #aaa;"></span>
<span id="pax.fx.drag.example7.box" style="position:absolute;left:200px;top:125px;width:300px;height:200px;border: 1px solid #000;"></span>

<div id="pax.fx.drag.example1" style="position:absolute;left:10px;top:40px;width:12em;border:1px solid #aaa; background:#ccf;padding:8px">
    Drag this box anywhere
</div>

<div id="pax.fx.drag.example2" style="position:absolute;left:10px;top:100px;width:12em;border:1px solid #aaa; background:#cfc;padding:8px">
    Drag this box left and right
</div>

<div id="pax.fx.drag.example3" style="position:absolute;left:10px;top:160px;width:12em;border:1px solid #aaa; background:#fcc;padding:8px">
    Drag this box up and down
</div>

<div id="pax.fx.drag.example4" style="position:absolute;left:10px;top:220px;width:12em;border:1px solid #aaa; background:#cff;padding:8px">
    Drag this box on a grid
</div>

<div id="pax.fx.drag.example5" style="position:absolute;left:10px;top:280px;width:12em;border:1px solid #aaa; background:#fcf;padding:8px">
    Drag this box within the window only
</div>

<div id="pax.fx.drag.example6" style="position:absolute;left:200px;top:40px;border:1px solid #aaa; background:#ffc;padding:8px">
    <div id="pax.fx.drag.example6.handle" style="width:12em;background:#99f;padding:4px" >Drag Handle</div>
    <div class="content" style="width:12em;">
        Drag this box using the handle.
    </div>
</div>

<div id="pax.fx.drag.example7" style="position:absolute;left:200px;top:125px;width:12em;border:1px solid #aaa; background:#f0f;padding:8px">
    Drag this box within a certain square only
</div>

<div id="pax.fx.drag.example8" style="position:absolute;left:10px;top:340px;width:12em;border:1px solid #aaa; background:#fcf;padding:8px">
    Drag this box and That box
</div>

<div id="pax.fx.drag.example9" style="position:absolute;left:200px;top:340px;width:12em;border:1px solid #aaa; background:#fcf;padding:8px">
    That box
</div>

<div id="pax.fx.drag.example10" style="position:absolute;left:550px;top:40px;width:12em;border:1px solid #aaa; background:#fcf;padding:8px">
    Snap box - drag near lines
</div>

<div id="pax.fx.drag.example11" style="position:absolute;left:550px;top:100px;width:12em;border:1px solid #aaa; background:#fcf;padding:8px">
    Return box - drag and drop to return
</div>

[:.
    pax.fx.drag( pax.$('pax.fx.drag.example1') );
    pax.fx.drag( pax.$('pax.fx.drag.example2'), { constrain: 'horizontal' } );
    pax.fx.drag( pax.$('pax.fx.drag.example3'), { constrain: 'vertical' } );
    pax.fx.drag( pax.$('pax.fx.drag.example4'), { grid: 30, callStart: function(arg) { console.log( arg.x + ' : ' + arg.y + ' : ' + arg.args ); } } );
    pax.fx.drag( pax.$('pax.fx.drag.example5'), { box: pax.util.getPosition( pax.$('exampleDiv'), false ) } );
    pax.fx.drag( pax.$('pax.fx.drag.example6'), { handle: pax.$('pax.fx.drag.example6.handle') } );
    pax.fx.drag( pax.$('pax.fx.drag.example7'), { box: {x:200, y:125, x2:500, y2:325} } );
    pax.fx.drag( pax.$('pax.fx.drag.example8') );
    pax.fx.drag( pax.$('pax.fx.drag.example9'), { handle: pax.$('pax.fx.drag.example8') } );
    pax.fx.drag( pax.$('pax.fx.drag.example9') );
    pax.fx.drag( pax.$('pax.fx.drag.example10'), { snap: [{x:550,y:50}, {y:300,limit:20}] } );
    pax.fx.drag( pax.$('pax.fx.drag.example11'), { return: true } );
:]

Note that we cater for almost all situations here, and you can obviously combine each argument type.

pax.fx.drop

pax.fx.drop = function(element,
args)

Sets an element as a drop target for a draggable element

Paramaters

elementwhat DOM element to use as a drop target
argsan object with various methods and options
  • finish - function that fires when the drop finishes on the target.  Parameters are {x, y, args}
  • hover - function that fires when the target is hovered by a drag element.  Parameters are {x, y, args}
  • hoverEnter - function that fires when a drag element hovers above the drop target.  Parameters are {x, y, args}
  • hoverExit - function that fires when a drag element exits the drop target.  Parameters are {x, y, args}

The args parameter is that of the drag element.

Example

<span id="pax.fx.drop.example1.target" style="position:absolute;left:200px;top:125px;width:300px;height:200px;border: 1px solid #000;">
    Drop target
</span>

<div id="pax.fx.drag.example1" style="position:absolute;left:10px;top:40px;width:12em;border:1px solid #aaa; background:#ccf;padding:8px">
    Drag this box onto the drop target
</div>

[:.
    pax.fx.drag( pax.$('pax.fx.drag.example1') );
    var args = {
        finish: function( x, y, args ) {console.log('finish ' + x + ' : ' + y);},
        hover: function( x, y, args ) {return;console.log('hover ' + x + ' : ' + y);},
        hoverEnter: function( x, y, args ) {pax.$('pax.fx.drop.example1.target').style.border='3px solid red';console.log('hoverEnter ' + x + ' : ' + y);},
        hoverExit: function( x, y, args ) {pax.$('pax.fx.drop.example1.target').style.border='1px solid #000';console.log('hoverExit ' + x + ' : ' + y);}
    };
    pax.fx.drop( pax.$('pax.fx.drop.example1.target'), args );
    exampleCleanup = function() {
        pax.fx.dropDict = {};
    };
:]

Note that the example uses the pax.fx.init method, which all effects should be doing.

pax.fx.init = function(target,
effect,
value,
duration,
direction,
callBack)
Initialises an effect, and adds it to the efefcts dictionary.
pax.fx.chain = function(fxList)
This method runs any number of effects, one after the other.
pax.fx.yoyo = function(target,
effect,
value,
duration,
direction)
Initialises an effect, and makes it continiously go forwards and backwards.
pax.fx.cancelAll = function(id)
Cancels all ongoing effect on the given targets id
pax.css.opacity = function(element,
percent)
Sets the opacity of an element
pax.fx.reveal = function(val,
ele,
pct)
To use this method, initialise via pax.fx.init.
pax.fx.colourFade = function (val,
ele,
pct)
To use this method, initialise via pax.fx.init.
pax.fx.opacityFade = function (val,
ele,
pct)
To use this method, initialise via pax.fx.init.
pax.fx.fadeIn = function(ele,
time,
callBack)
Fades in an element in optional time miliseconds
pax.fx.fadeOut = function(ele,
time,
callBack)
Fades out an element in optional time miliseconds
pax.fx.move = function (val,
ele,
pct)
To use this method, initialise via pax.fx.init.
pax.fx.size = function (val,
ele,
pct)
To use this method, initialise via pax.fx.init.
pax.fx.cursorPos = function(event)
Get co-ordinates of the mouse cursor
pax.fx.drag = function(element,
args)
Sets an element as draggable
pax.fx.drop = function(element,
args)
Sets an element as a drop target for a draggable element
pax.util.getPosition = function(element,
excludeParent)
Locates position and dimensions of an object
Close