Animated List of Links

Submitted by alpha_luna on Thursday, May 26, 2016 - 11:47.

Animated List of Links

In this article, we are going to learn on how to create a simple animation in a list of links. This simple tutorial created by the jQuery plugin. You can use this Animated List of Links on your page in the sidebar or wherever you want to put it to attract or to impress the user from your page.

HTML Source Code

This is our lists of links.

<ul class="example_animation">
        <li><a class="link_style" href="http://www.sourcecodester.com/">Free Source Code Here</a></li>
        <li><a class="link_style" href="http://www.sourcecodester.com/node/10317">Contact Information System</a></li>
        <li><a class="link_style" href="http://www.sourcecodester.com/tutorials/javascript/10362/todays-date-using-javascript.html">Today's Date Using JavaScript</a></li>
        <li><a class="link_style" href="http://www.sourcecodester.com/tutorials/javascript/10361/text-alert-entering-web-page.html">Text Alert to Entering a Web Page</a></li>
        <li><a class="link_style" href="http://www.sourcecodester.com/node/10359">Automatic Student Identification Number Generate</a></li>
        <li><a class="link_style" href="http://www.sourcecodester.com/node/10317">Online Task Management System</a></li>
</ul>

Our Script

To load the animation.

<script>
 
jQuery(function($){ // on DOM load
        $('ul.example_animation').list_of_Animation({pause: 1, postclass: 'example_animation-after'})
})
 
</script>

Result:

Kindly click the "Download Code" button below for full source code. Thank you. So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

45 views