How to stop animation with jQuery timers?
<p>I'm wondering how to stop an animation made with jQuery timers. I think I have tried everything, I would really like your help.</p>

<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
        &lt;head&gt;
        &lt;meta content='yes' name='apple-mobile-web-app-capable'&gt;
        &lt;meta content='default' name='apple-mobile-web-app-status-bar-style'&gt;
        &lt;meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'&gt;
        &lt;title&gt;HeartMath - Danmark&lt;/title&gt;
        &lt;script src='http://code.jquery.com/jquery.min.js' type='text/javascript'&gt;&lt;/script&gt;
        &lt;script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js' type='text/javascript'&gt;&lt;/script&gt;
        &lt;script src='inc/jquery.timers-1.1.2.js' type='text/javascript'&gt;&lt;/script&gt;
        &lt;script type="text/javascript" &gt; 

    jQuery.fn.log = function (msg) {
      console.log("%s: %o", msg, this);
      return this;
    };   var fixgeometry = function() {
        /* Some orientation changes leave the scroll position at something
         * that isn't 0,0. This is annoying for user experience. */
        scroll(0, 0);

        /* Calculate the geometry that our content area should take */
        var header = $(".header:visible");
        var footer = $(".footer:visible");
        var content = $(".content:visible");
        var viewport_height = $(window).height();

        var content_height = viewport_height - header.outerHeight() - footer.outerHeight();;

        /* Trim margin/border/padding height */
        content_height -= (content.outerHeight() - content.height());
        content.height(content_height);
      }; /* fixgeometry */

    $(document).ready(function() {
        $(window).bind("orientationchange resize pageshow", fixgeometry);


             var animationSpeed = 3500;
             var animationHeight = $(window).height() * 0.70;
                $("input[type='radio']").bind( "change", function(event, ui) {


                if($(this).val() == "true") {
                    startAnimation(animationSpeed);
                    $(this).log("animationen burde starte");

                } 
                else  {
                    stopAnimation();
                    $(this).log("animationen burde stopppe");
                } 

                }).log("der blev trykket"); 




                function startAnimation(animationDuration) {
                    $(".breather").everyTime(10, function(){                         
                    $(".breather").animate({top:animationHeight}, animationDuration).animate({top:"0"}, animationDuration);
                    }).log("startAnimation");
                };
                function stopAnimation() {
                    $(".breather").stopTime().stop().log("stopAnimation");

                };



    });
    &lt;/script&gt;
        &lt;style type="text/css"&gt;
    html, body {
        width: 100%;
    }
    div.breather {
        display: block;
        position:relative;
    }
    }
    &lt;/style&gt;
        &lt;link href='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css' rel='stylesheet'&gt;
        &lt;link rel="stylesheet" type="text/css" href="jquery-mobile/hm-mobile-theme.css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
        &lt;div data-role='page' data-theme='a'&gt;
          &lt;div class='header' id="header" data-role='header'&gt; &lt;img src="img/hm-logo.png" style="margin:0px auto;" height="40" /&gt; &lt;/div&gt;
          &lt;div class='content' data-role='content'&gt;
            &lt;div class="breather"&gt;landscape!&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='footer' data-role='footer'&gt;
            &lt;div data-role="fieldcontain"&gt;
              &lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;
                &lt;input type="radio" name="ignition" id="start" value="true" /&gt;
                &lt;label for="start"&gt;Start&lt;/label&gt;
                &lt;input type="radio" name="ignition" id="stop" value="false" checked="checked" /&gt;
                &lt;label for="stop"&gt;Stop&lt;/label&gt;
              &lt;/fieldset&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>What happens now is that when i press stop.. the animation just reverses and loops again</p>
