Back to Top

Synchronous Up & down Slider with jQuery

Hey! Today I want to share a synchronous up & down sliding effect using a jQuery with you. The main idea is when you hover on the Title, the image will be animated to top and description will be animated to bottom.

Here I have used simple jQuery and easing plugin of jQuery for effect.

Alright! Let’s start with some simple HTML!

The HTML:

Let’s examine the code,The structure is pretty straightforward: we will wrap all our slider elements in a list elements. The image,title and description all elements will be in divs.

Here, I have set the visibility of image and description as hidden so image and description will be visible by the script.

The script:

The main idea for the sliding functionality is to bind the hover event to the list item and with the function and animate the image holder to top and description holder to the bottom.

Here, I have used jquery easing plugin for effect.

The CSS

Let’s take a look at the common style.

Here, title div need to have position: relative and we can set absolute position for the image_holder and desc_holder because we want sliding effect and so its not take up any additional space.

DEMO

View Demo

You may also like:

Solution: Header moves using jQuery mobile and Phonegap in Android
Active Menu using jQuery in WordPress
Run-Time Validation using jQuery

I hope you enjoyed this little effect and find it useful! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Comments (1)

  1. Ravi Veliyat says:

    Nice fresh effect.. keep bringing fresh things 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

AngularJS Routing Using UI-Router

Posted on 2 years ago

Bhumi

Welcome to Creative Dev

Posted on 6 years ago

Bhumi

How to Detect the Orientation of Ipad

Posted on 6 years ago

Bhumi

How to use EXISTS and NOT EXISTS in MySQL?

Posted on 3 years ago

Bhumi

What is DocType In HTML

Posted on 6 years ago

Bhumi