Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Blogs about jquery

A jQuery Demo - Show, Hide and Toggle.


One of the reasons that jQuery is so popular is that it's so simple. Just click hide, show or toggle visibility to change the image below. Here's the only code required:

<img id="kitten" src="" />
<a href="#" id="hide">hide</a>, <a href="#" id="show">show</a> or <a href="#" id="toggle">toggle visibility</a>

  <script type="text/javascript">

	$("a#show").click(function() {

	$("a#hide").click(function() {

	$("a#toggle").click(function() {


Need more options? Bam - jQuery has got ya covered!

Yo Dawg, I Heard You Liked Working jQuery in Your Webpages.


My first version of a script to show and hide extra list items didn't work with the recent update to version 1.4.2 of the jQuery JavaScript library. I've finally finished an update to this script that works, and is tidier to boot. Enjoy!

Smooth Animation Using jQuery's slideToggle() - Details.


I have written a more detailed description of the solution I found to jQuery's jumpy animations in Pew Pew Laser Articles. Though I'm working with the slideToggle() function, I bet the solution would fix similar cases using animate(), show(), hide() and other animation functions.

Essentially, the solution works by storing the heights of animating elements before they are hidden, and then re-applying those heights just before starting the animations. I'm pretty proud using the array and jQuery's each() function to simplify the grunt work of storing and re-applying the heights. It may well be my best JavaScript work.

Smooth Animation Using jQuery's slideToggle().


I finally found a solution to a jQuery problem that had been bothering me for nearly six months - the dreaded jumping animation. Here is a simple definition list, where visibility of the definitions is animated using jQuery's slideToggle() function.

Bat Cupcakes
These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping. The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.
Jam Cookies
Start with a tube of premade sugar cookie dough. Press a cookie-sized amount into mini-muffin pans and then bake as directed. Dust the cookie cups with powdered sugar. Microwave some jam (raspberry and mint) and spoon it into the cookie cups. Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.
Chocolate Sprinkle Cupcakes
These are chocolate cupcakes, with a cream-cheese frosting, and fall-themed harvest leaf sprinkles.

In the previous version, the elements would jump a bit near the end of the animation as they were closing. With jQuery version 1.2.x, the most popular solution for this was to remove all padding and margin on the animating elements, as it was known that jQuery wouldn't animate them. jQuery v1.3 now animates margin and padding, but simply upgrading to the newest jQuery library did not fix my problem.

I noticed that my animation jumps occurred only when the animating elements or any of their parents had a width specified. The final fix came via Fen's comments on "Animation Jump - quick, tip" at I store the height of all dd before they are initially hidden, and the re-apply the height just before slideToggle()'s hiding animation.

To make the script flexible enough to handle new elements added to the definition list, I stored each element's widths in an array, and then retrieved the appropriate width based on the definition's position in the list. Here is my finished code:


	//  Get height of all dds before hide() occurs.  Store height in heightArray, indexed based on the dd's position.
	heightArray = new Array();
	$("dl.v_show_hide dd").each(function(i) {
	  theHeight = $(this).height();
	  heightArray[i] = theHeight;

	// Hide all dds
	$("dl.v_show_hide dd").hide();

	//  When a dt is clicked, 
	$("dl.v_show_hide dt").click(function () {
	  //  Based on the dt's position in the dl, retrieve a height from heightArray, and re-assign that height to the sibling dd.
	  $(this).next("dd").css({height: heightArray[$("dl.v_show_hide dt").index(this)]});
	  //  Toggle the slideVisibility of the dd directly after the clicked dt
		//  And hide any dds that are siblings of that "just shown" dd.


I suspect that what I encountered is a jQuery bug - that when a parent width specification exists, the animating element's height is not calculated correctly when animating to non-visible using slideToggle().

1 comment(s).

jQuery - Vertical Show / Hide Issues.


The only trouble at all that I've encountered with jQuery is that if you study the page carefully as the show/hide animation works, you'll notice a big jump near the end of the animation. This jumpiness when using the slideToggle() function said to only occur when the animating elements have margin or padding.

Phooey, I say! I really dislike having to add extra elements to work around this issue. In my example below, I haven't got any margin or padding on the dt element. There must be something else at work here, and it's driving me nuts.

1 comment(s).

More blogs about jquery: