Simple Toggle Top Bar Animation Using jQuery animate() | Code Snippet #25

26 Feb , 2014  Code Snippets 

Toggle-Top-Bar-jQuery-Code-SnippetCode Snippet #25: The code shows us how to easily create a simple toggle top bar animation using jQuery toggle() and animate() functions. We create a quick top header with toggle effects using toggle() method of jQuery.

As we know, jQuery toggle animations and toggle effects are seen in most of the web designs and websites recently. This is just because, people are more interested to toggle and look at the contents instead of refreshing the page upon clicking, which is just a wastage of time waiting.

In our website, we have been seeing recently on toggle effects like toggle left pane, toggle HTML5 login form and change background color of div using toggleClass. Today, we want to see how to toggle the header bar with little animation. The few lines of code produces the toggle animation effects.

Demo: [Click on the strip below]

HTML:

CSS:

jQuery:

Explanation:

This code snippet is easy to understand. We have created a top bar which has the id “topbar”. In the jQuery we create a toggle function on the topbar id. When the topbar is clicked it animates and expands to height of 60px. Otherwise, it slides back to height of 30px. Hence, you see the top bar is sliding or toggling up and down when it is clicked. Hope you enjoyed this tutorial.

 



, ,

Comments are closed.