Javascript 如何使用jQuery计时器停止动画？
我想知道如何停止使用jQuery定时器制作的动画。我想我什么都试过了，我真的很想得到你的帮助Javascript 如何使用jQuery计时器停止动画？,javascript,jquery,Javascript,Jquery,我想知道如何停止使用jQuery定时器制作的动画。我想我什么都试过了，我真的很想得到你的帮助 <!DOCTYPE html> <html> <head> <meta content='yes' name='apple-mobile-web-app-capable'> <meta content='default' name='apple-mobile-web-app-status
<!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>
心脏数学-丹麦
jQuery.fn.log=函数（msg）{
console.log（“%s:%o”，msg，this）；
归还这个；
}; var fixgeometry=函数（）{
/*某些方向更改会使滚动位置保持在某个位置
*这不是0,0。这对用户体验来说很烦人*/
滚动（0,0）；
/*计算内容区域应采用的几何图形*/
var header=$（“.header:可见”）；
var footer=$（“.footer:可见”）；
var content=$（“.content:可见”）；
var viewport_height=$（窗口）.height（）；
var content_height=viewport_height-header.outerHeight（）-footer.outerHeight（）；；
/*修剪边距/边框/填充高度*/
content_height-=（content.outerHeight（）-content.height（））；
内容高度（内容高度）；
}; /* 固定几何*/
$（文档）.ready（函数（）{
$（窗口）.bind（“方向更改大小页面显示”，fixgeometry）；
var animationSpeed=3500；
var animationHeight=$（窗口）.height（）*0.70；
$（“输入[type='radio']”）。绑定（“更改”，函数（事件，用户界面）{
if（$（this.val（）=“true”）{
开始动画（动画速度）；
$（this.log（“animationen burde starte”）；
}
否则{
停止动画（）；
$（this.log（“animationen burde stoppe”）；
}
}).log（“der blev trykket”）；
函数startAnimation（动画持续时间）{
$（“.sporter”）。每次（10，function（）{
$（“.sporter”）.animate（{top:animationHeight}，animationDuration）。animate（{top:0}，animationDuration）；
}).log（“startAnimation”）；
};
函数stopAnimation（）{
$（“.sporter”）.stopTime（）.stop（）.log（“stopAnimation”）；
};
});
html，正文{
宽度：100%；
}
潜水呼吸器{
显示：块；
位置：相对位置；
}
}
景观
开始
停止
现在发生的是当我按下停止键。。动画只是反转并再次循环请确保通过添加一些调试（console.log（））调用stopAnimation。调用stopAnimation时不带参数，但函数有一个未使用的参数
因此，向stopanimation和if（val==false）语句添加一些调试。如果一切正常，我们可以继续搜索。请确保通过添加一些调试（console.log（））调用stopAnimation。调用stopAnimation时不带参数，但函数有一个未使用的参数
因此，向stopanimation和if（val==false）语句添加一些调试。如果一切正常，我们可以继续搜索。当您调用.stop（）停止jQuery动画时，将其更改为.stop（true）以清除动画队列（文档）。我不确定为什么会有一个队列，但它看起来与您正在使用的计时器插件有关。使用queue（）.length查看队列中还有多少动画。调用.stop（）停止jQuery动画时，将其更改为.stop（true）以清除动画队列（文档）。我不确定为什么会有一个队列，但它看起来与您正在使用的计时器插件有关。使用queue（）.length查看队列中还剩下多少动画。是否发布html或至少一个经过sanatized的片段？给您。我还添加了控制台日志，您想发布html还是至少发布一个sanatized代码段？给您。我还添加了控制台登录，我还对上面的代码进行了编辑。。所以它包含了我编辑的所有markupi代码。。所以它包含了所有的标记