Tag Archive: jquery div animation

JQuery Slider with Sliding Panes and Opacity Changes

August 28, 2011

I designed a Jquery Slider with “panes” that transition in size and opacity. I liked this idea as an alternative to some sliders that “slide” pane to pane, or ones that have funny transitions between each pane.

This could be used more for a navigation menu or perhaps just a small information block for a few items.

So, now that you’ve seen what’s in store, let’s go over how to make it!

The essentials

You need to include a few files in the header to make sure your JQuery works. Call to them this way :

You can find those files here.

You also need to call to a .js file that we are going to create. I called mine “toggleeffect.js”, so call yours as well :

The HTML

Now we begin laying the foundation for our slider :

The important things to remember are that ‘front title’ is the section that displays when NOT hovered, and that ‘backblock’ is the section that displays when the div tag is enlarged.

The CSS

Next, we’ll need to apply the following properties to our stylesheet. Let’s check the markup :

Now you’ll note that each slide has an individual class as well. I used this to apply individual background colors to each slide, but it doesn’t apply for this particular demo.

**Please note that although changing the background color does look nice, it also drastically reduces the performance of the JQuery.

The JQuery

Now we can start writing our JQuery. You will place this in the file you created called “toggleeffect.js” or whatever you decided to name yours.

The JQuery is basically saying, whenever ‘slide’ is hovered, perform the following functions :

1. Change the non-hovered slides’ widths to 50 pixels.
2. Fade out the opacity of their divs.
3. Fade in the hovered div’s ‘backblock’ div tag.
4. Widen the hovered div to 700 pixels.

Then, when not hovered, perform the reverse animations.

Here’s a few things you can edit :

1. The number at the end of each statement is the duration of time it takes to complete each animation, so 1000 = 1000 milliseconds = 1 second. You can adjust this as you see fit.

2. The opacity can be changes as well. You can even include additional css properties along with Opacity, like width, height, backgroundcolor, etc. You can find more here.

The finish

That’s about it! Feel free to mess around with different CSS properties, images, etc. This is all open-source.