Implementing a sequential pulsate effect using jQuery.

by Abe Miessler 22. June 2010 00:58

I was recently working on a webpage where I wanted to have a collection of tabs at the top of the page pulsate one after the other.  Had to do a bit of digging around (and get some help from a friend of mine who happens to be a jQuery expert) so I thought I would post it up here incase anyone else runs into this.  Once it was done it was remarkably little code, yet another example of why I'm falling in love with jQuery and jQuery UI.

<html>
    <head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script>
              $(document).ready(function () {
                  $("#myTabs").tabs({ fx: { opacity: "toggle"} });
                  recurivePulsate($("#items").find("li")[0]);
              });

              function recurivePulsate(elem) {
                    $(elem).effect("pulsate", { times: 1 }, 500, function () {
                        recurivePulsate($(elem).next());
                    });
                }
        </script>
    </head>
    <body>
        <div id="myTabs">
            <ul id="items">
               <li><a href="#first">First</a></li>
               <li><a href="#second">Second</a></li>
               <li><a href="#third">Third</a></li>
               <li><a href="#fourth">Fourth</a></li>
            </ul>
            <div id="first">Data for First!</div>
            <div id="second">Data for Second!</div>
            <div id="third">Data for Third!</div>
            <div id="fourth">Data for Fourth!</div>
        </div>
    </body>
</html>

Tags:

jQuery

Powered by BlogEngine.NET 1.6.0.0

About the author

Abe lives with his beautiful family in California's Gold Country.  He enjoys outdoor activities, anything that has to do with technology and playing chess.

profile for Abe Miessler on Stack Exchange, a network of free, community-driven Q&A sites