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!


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.


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.


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

How to use NoSQL and MongoDB

Posted on 6 years ago


How to use HTML5 download attribute?

Posted on 3 years ago


Storing Objects in Html5 Local Storage

Posted on 2 years ago


How to prepare and execute PHP PDO queries

Posted on 3 years ago