jQuery Sliding Boxes and Captions create an awesome look and feel for picture galleries and are great to get more content in for SEO. jQuery makes it possible to create really cool caption effects when a user hovers over an element on page such as an image. If you have done and research about sliding box captions via Google then you may have stumbled upon Sam Dunn’s post entitled: Sliding Boxes and Captions with jQuery. This is a very cool tutorial and the demo is fantastic as well. But what about easing?

The CSS

You can use the same CSS as the demo or style your own. Here’s the CSS used for the demonstration to work from:

Code for jQuery Sliding Boxes with Easing

The jQuery .animate(); method allows us to easily specify the easing effect using .animate( properties, [ duration ], [ easing ], as seen below. For this to work the jQuery Easing Plugin must be included on your site.

Keep in Mind…

You will have to tweak the pixel amounts for the captions depending on your design. As well, you are fully capable of changing the easing from my default “easeout” to others.

Demo Coming Soon!

Looking for the demo? It’s coming soon. For now, if you are having trouble implementing easing in your

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow
Devin

Is your WordPress Running Slow?

Milliseconds are money. Website speed is extremely important. We highly recommend WP Engine. Why? Because they make a sluggish WP site fast, support is great and they have excellent uptime.

WP Engine Logo
  • Nate

    any way to set up the captions so that when the page loads, the captions are already hidden and not visible? Great tutorial!

    • http://wordimpress.com Devin Walker

      Absolutely, simple put display: none; via CSS!

    • http://twitter.com/innerwebs Devin Walker

      Hey Nate!

      I think what you are see is a FOUC (Flash of Unstyle Content). I’m a bit confused on how you are seeing this as the overflow:hidden; should take care of this. I’ve been meaning to whip together a demo for this tutorial so keep check back soon if you can. Maybe pass along a link and I could take a look at your particular issue.

      Devin

  • Nate

    any way to set up the captions so that when the page loads, the captions are already hidden and not visible? Great tutorial!

    • http://twitter.com/innerwebs Devin Walker

      Hey Nate!

      I think what you are see is a FOUC (Flash of Unstyle Content). I’m a bit confused on how you are seeing this as the overflow:hidden; should take care of this. I’ve been meaning to whip together a demo for this tutorial so keep check back soon if you can. Maybe pass along a link and I could take a look at your particular issue.

      Devin

  • Tim

    The demo is coming soon?!?

  • Tim

    The demo is coming soon?!?