Stop Pulsate jQuery Effect

Question

I am currently using the kilianvalkhof jQUERY pulsate effet. http://kilianvalkhof.com/jquerypulsate/

My aim is to start the effect on a div when the user clicks on a menu item.

When the user clicks on a different menu item I want the currant active pulsate effect to stop and a new one to start on a different DIV.

I can't seem to find a way to stop the effect.

    <!-- Menu -->

<div id="user_menu">
       <ui>
        <li id="item1"><a  href="#">Name 1</a></li>
        <li id="item2"><a  href="#">Name 2</a></li>
      </ui>
</div>

<!-- Map -- >

<div id="desk1">

<img src="images/image1.jpg" />

</div>

<div id="desk2">

<img src="images/image1.jpg" />

</div>

//jQuery
$(function() {
    $("#item1")

   .click(function() {
            //$("#desk1").pulsate({color:"#09f"});              

       });

    });

The issue is not being able to turn off the .pulsate. So if you click on item1 then click on item2 both will continue to pulsate until the page refreshes.

There is an option to set the pulsate to a given number but Ideally I want it to keep pulsing on a given div until another menu item is click.

Thanks Guys.

Samuel

Answer 1

Call destroy to stop it.

$("#YourItemsId").pulsate("destroy");