如何用jQuery计时器停止动画

How to stop animation with jQuery timers?

本文关键字：动画 计时器 何用 jQuery      更新时间：2023-09-26

我想知道如何停止用jQuery计时器制作的动画。我想我什么都试过了，我真的很希望你能帮助我。

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

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

现在发生的是，当我按下停止…动画会再次反转并循环

当你调用。stop()来停止jQuery动画时，将它改为。stop(true)来清除动画队列(文档在这里)。我不知道为什么有一个队列，但它看起来像它有一些与定时器插件，你正在使用。使用队列()。

请确保通过添加一些调试(console.log())来调用stopAnimation。你调用stopAnimation时不带参数，但是函数有一个参数，没有使用。

所以在stopanimation和if(val==false)语句中添加一些调试。如果一切正常，我们可以继续搜索

相关文章：