X Library Viewer

Download the X Distribution File.

X Index

Animation

xAniLine, xAnimation.arc, xAnimation.corner, xAnimation.css, xAnimation.imgSize, xAnimation.line, xAnimation.opacity, xAnimation.para, xAnimation.rgb, xAnimation.rgbByClass, xAnimation.scroll, xAnimation.size, xAnimation, xAniOpacity, xAniRgb, xAniWH, xAniXY, xEllipse, xParaEq, xSequence, xSlideCornerTo, xSlideTo, xWinScrollTo.

DOM

xFirstChild, xGetElementById, xGetElementsByAttribute, xGetElementsByClassName, xGetElementsByTagName, xLoadLink, xLoadScript, xNextSib, xParent, xParentN, xPrevSib, xSmartLoad, xSmartLoad2, xSmartLoadScript.

Debug

xConsole, xEditable, xName, xParentChain, xSetIETitle.

Event

xAddEventListener, xDisableDrag, xDisableDrop, xEnableDrag, xEnableDrag2, xEnableDrop, xEvent, xHttpRequest, xPreventDefault, xRemoveEventListener, xStopPropagation.

Image

xImgAsyncWait, xImgRollSetup, xTriStateImage.

Iteration

xEach, xEachE, xEachN, xEachUntilReturn, xTimes, xWalkToFirst, xWalkToLast, xWalkTree, xWalkTree2, xWalkTree3, xWalkTreeRev, xWalkUL.

Misc

xCookie, xDef, xDeg, xGetURLArguments, xLibrary, xLinearScale, xNum, xRad, xRound, xStr.

Position

xCardinalPosition, xCen, xCenter, xGetEleAtPoint, xHasPoint, xIntersection, xLeft, xMoveTo, xOffset, xPageX, xPageY, xScrollLeft, xScrollTop, xTop.

Size

xClip, xColEqualizer, xDocSize, xHeight, xResizeTo, xWidth.

String

xCamelize, xCapitalize, xHex, xPad, xParseColor, xRgbToHex, xStrEndsWith, xStrRepeat, xStrReplaceEnd, xStrStartsWith, xTrim.

Style

xAddClass, xDisplay, xFindAfterByClassName, xFindBeforeByClassName, xGetComputedStyle, xGetCSSRules, xGetStyleSheetFromLink, xHasClass, xHasStyleSelector, xHasStyleSheets, xInsertRule, xOpacity, xRemoveClass, xStyle, xTagStyle, xToggleClass, xTraverseDocumentStyleSheets, xTraverseStyleSheet.

Table

xTable, xTableCellVisibility, xTableColDisplay, xTableCursor, xTableCursor2, xTableHeaderFixed, xTableIterate, xTableRowDisplay, xTableSync.

UI

xBar, xCalendar, xCollapsible, xDialog, xFenster, xFenster2, xMenu1, xMenu1A, xMenu1B, xMenu5, xMenu6, xModalDialog, xPopup, xSelect, xSplitter, xTabPanelGroup, xTextArea, xTooltipGroup.

Window

xClientHeight, xClientWidth, xWinClass, xWindow, xWinOpen.

xAnimation.rgbByClass

Description

Animate a CSS property that accepts color values, for all elements with the given className. This is an xAnimation method.

Syntax

xa.rgb(cls, p, v, t[, a[, b[, oe]]]);

Parameters

xaAn xAnimation object.
clsA CSS class name (string).
pThe CSS property name (string).
vThe target value (a color string, '#RRGGBB', or an integer).
tThe total time for the animation, in milliseconds.
aAcceleration type: 0=none(constant velocity), 1=sine(fast start, slow end), 2=cosine(slow start, fast end), 3=combined(slow start, fast mid, slow end). This is optional, the default is 0.
bBounces: 0=no bounce, 1=from start to end then bounce back to start, 2=from start to end then bounce back to start then bounce back to end, etc. Ignored when a=0. This is optional, the default is 0.
oeThe onEnd handler. It can be a function reference or a string. It will be executed at the completion of the animation. The handler will receive the xAnimation object as an argument and the handler's "this" also points to the xAnimation object. If the handler returns or evaluates true then the animation will be repeated. This is optional.

Source

Default.

// xAnimation.rgbByClass, Copyright 2009 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
xAnimation.prototype.rgbByClass = function(cls,p,v,t,a,b,oe)
{
  var i = this, co, ea;
  ea = xGetElementsByClassName(cls);
  co = xParseColor(xGetComputedStyle(ea[0],p));
  i.x1 = co.r; i.y1 = co.g; i.z1 = co.b; // initial colors
  co = xParseColor(v);
  i.x2 = co.r; i.y2 = co.g; i.z2 = co.b; // target colors
  i.prop = xCamelize(p);
  i.init(ea,t,h,h,oe,a,b);
  i.run();
  function h(i) { // onRun and onTarget
    // In this function i.e == ea
    for (var j = 0; j < i.e.length; ++j) {
      i.e[j].style[i.prop] = xRgbToHex(Math.round(i.x),Math.round(i.y),Math.round(i.z));
    }
  }
};

Dependencies

xAnimation, xGetElementsByClassName, xParseColor, xGetComputedStyle, xCamelize, xRgbToHex

Demos

xanimation.html - Start page of all xAnimation demos.

Notes

27Nov09See "http://cross-browser.com/forums/viewtopic.php?id=702".

Revisions

1: 27Nov09Initial release.

License

By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.

Tech Support

Forum support is available at the X Library Support Forums.

About Cross-Browser.com

Cross-Browser.com is the home of X - a cross-browser Javascript library, and many demos, applications, articles and documentation.

Search

Cross-Browser.com

World Wide Web

User Projects

If you are using X, XC or anything from this site, show off your work by posting a link in the X Showcase forum.