Question

我想知道如何停止使用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>

现在发生的事情是，当我按下停止...动画只是反转并再次循环

Answer 1

当您调用.stop（）来停止jQuery动画时，请将其更改为.stop（true）以清除动画队列（docs here）。我不确定为什么会有队列，但看起来它与你正在使用的计时器插件有关。使用queue（）。length查看队列中剩余的动画数量。

Answer 2

请确保通过添加一些调试（console.log（））来调用stopAnimation。你在没有参数的情况下调用stopAnimation，但函数有一个参数，没有使用。

因此，为stopanimation和if（val == false）语句添加一些调试。如果这一切都按预期工作，我们可以继续搜索。

如何使用jQuery计时器停止动画？

2 个答案: