Blogs about jquery:

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

5.6.2009

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().

2.18.2009

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 occured 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 jqueryfordesigners.com. 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:

$(document).ready(function(){ // 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 $(this).next("dd").slideToggle("slow") // And hide any dds that are siblings of that "just shown" dd. .siblings("dd").slideUp("slow"); }); });

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.

9.16.2008

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).

jQuery - Vertical Show / Hide.

9.9.2008

Here's a definition list. Click on one of the baked goods below to reveal the description:

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 harvest leaf sprinkles.

Again, this is pretty dary simple to set up. Here's the jQuery code:

$(document).ready(function(){ // Hide all dds $("dl.v_show_hide dd").hide(); // When a dt is clicked, $("dl.v_show_hide dt").click(function () { // Toggle the slideVisibility of the dd directly after the clicked dt $(this).next("dd").slideToggle("slow") // And hide any dds that are siblings of that "just shown" dd. .siblings("dd").slideUp("slow"); }); });

jQuery - Tablesorter.

9.7.2008

Check out this table. If you've got JavaScript enabled, you'll see a highlighted row when you move your mouse over it. This is courtesy of jQuery. You'll also be able to sort the columns by clicking on a header, and the alternate row coloring will match the sorted row ordering. These additions come from a jQuery plugin, tablesorter.

Customer Date City Store ID Amount
ASH (A) 5/03/2006 Bellvue 16 508.51
BARBUR (B) 7/26/2004 Portland 13 8512.91
COUCH (C) 07/04/2006 Seattle 23 -4118.45
DIVISION (D) 07/11/2006 Tacoma 12 89.32
FLANDERS (NE) 09/22/2004 Centralia 24 480.41
HOLGATE (H) 12/2/2005 Bellvue 11 -56.15
BURNSIDE (B) 09/14/2004 Portland 17 600.64

Pay attention Hollywood folks - this method of table sorting is much better than previous implementations. The jQuery/tablesorter method resolves spacing issues, and has TONS of extra abilities. Check out my jQuery tablesorter article for a detailed discussion of the code.

Remaining blogs about jquery: