A Smarter Way to Learn jQuery: Learn it faster. Remember it longer. by Mark Myers

Author:Mark Myers
Language: eng
Format: mobi, epub, azw3, pdf
Published: 2016-02-26T22:00:00+00:00

When the user clicks "Show more," jQuery adds the "full_height" class to the paragraph, expanding it to show the entire joke:

$("a#show_more").on("click", function() {

$("p.short").addClass("full_height");

});

* * *

Find a demo for this chapter at:

http://jsfiddle.net/ASmarterWayToLearn/g05vk5bk/

Find the interactive coding exercises for this chapter at:

http://www.ASmarterWayToLearn.com/jquery/37.html

38

Animate an expansion

In the last chapter, I showed you how to expand a truncated paragraph so all of its text becomes visible. Another approach is to animate the expansion so the user can see it grow. Here's how to do it, using the same elements I used in the last chapter:

$("a#show_more").on("click", function() {

$("p#ex_1").animate({height: "10em"});

});

Things to notice:

The original, truncated height is 4em. The statement above tells the program to let the user see the paragraph expand from the bottom down to a height of 10em.

The name of the method is animate.

Like all methods, the method is followed by parentheses, but...

Within the parentheses, the details of the animation are enclosed in curly brackets: animate({height: "10em"})

The attribute isn't in quotation marks and is followed by a colon: animate({height: "10em"})

The value of the attribute is in quotation marks: animate({height: "10em"})

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.