• We just launched and are currently in beta. Join us as we build and grow the community.

Animated List of Links

toyol

Mobile App Auditor
T Rep
0
0
0
Rep
0
T Vouches
0
0
0
Vouches
0
Posts
164
Likes
21
Bits
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 300 XP
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.
  1. <ul

    class

    =

    "example_animation"

    >
  2. <li

    ><a

    class

    =

    "link_style"

    href

    =

    "http://www.sourcecodester.com/"

    >

    Free Source Code Here</

    a

    ></

    li

    >
  3. <li

    ><a

    class

    =

    "link_style"

    href

    =

    "http://www.sourcecodester.com/node/10317"

    >

    Contact Information System</

    a

    ></

    li

    >
  4. <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

    >
  5. <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

    >
  6. <li

    ><a

    class

    =

    "link_style"

    href

    =

    "http://www.sourcecodester.com/node/10359"

    >

    Automatic Student Identification Number Generate</

    a

    ></

    li

    >
  7. <li

    ><a

    class

    =

    "link_style"

    href

    =

    "http://www.sourcecodester.com/node/10317"

    >

    Online Task Management System</

    a

    ></

    li

    >
  8. </

    ul

    >

Our Script

To load the animation.
  1. <

    script>

  2. jQuery(

    function

    (

    $)

    {

    // on DOM load
  3. $(

    'ul.example_animation'

    )

    .list_of_Animation

    (

    {

    pause:

    1

    ,

    postclass:

    'example_animation-after'

    }

    )
  4. }

    )

  5. </

    script>

Result:

1_100.png


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.


Download
You must upgrade your account or reply in the thread to view hidden text.
 

452,292

323,340

323,349

Top