Click here to view code image
// CSS implementation
.blast:nth-child(3) {
color: red;
}
// jQuery implementation
$(“.blast”).eq(2).css(“color”, “red”);
Both examples above target the third element on the page that has the .blast class
applied. (Note that jQuery’s eq function is 0-based whereas CSS’ nth-child is 1-
based, hence the different integer values being passed into the examples.) Let’s continue
with a jQuery implementation to work toward a complete example:
Click here to view code image
Current status: paused
// Blast the div using the word delimiter
$(“div”).blast({ delimiter: “word” })
// Select the third word in the sentence (the span containing the
“paused” text)
.eq(2)
// Fade the third element out of view then replace its inner text
with a new message
.velocity({ opacity: 0 }, function() { $(this).text(“running”); })
// Fade the replaced text into view
.velocity({ opacity: 1 });
This Blasts a sentence, selects its third word (“paused”), fades the word out of view,
replaces the faded word with a new word (“running”), then fades the new word into view.
The net effect is that the status-indicating keyword within a sentence gracefully fades into
a new word to alert the user of a change. This is a tremendously elegant effect that consists
of only a few lines of simple code. If you were to perform this effect many times over a
larger block of text, you could achieve an effect in which one message appears to
sporadically change into another.
Transitioning text fancifully
You could easily swap the transition.fadeIn effect you’ve used thus far with
another effect from Velocity’s UI pack. Some of the other effects are quite fanciful,
ranging from transition.shrinkIn, which causes an element to scale down into
view, to transition.perspectiveDownIn, which causes an element to rotate
down into view like a hinged barn door. (As always, the sophistication of your effects
should be rooted in the principles discussed in Chapter 3, “Motion Design Theory.”)
NoteFor a complete list of UI pack effects, including live demos, visit
VelocityJS.org/#uiPack.)Keep in mind that some effects use 3D transforms (rotateX, rotateY, and
translateZ), which don’t work with on elements whose CSS display value is set to