JQUERY的动画animate代码怎么控制它的速度

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQUERY的动画animate代码怎么控制它的速度相关的知识，希望对你有一定的参考价值。

<script>
$(document).ready(function()
$("button").click(function()
$("div").animate(
height:'toggle'
);
);
);
</script>

想控制它的速度，怎么写。

1、首先双击打开HBuilderX工具，新建一个html5页面，并引入jquery文件，如下图所示。

2、在<body></body>标签元素内，插入一个label和button，如下图所示。

3、保存代码并打开浏览器，预览页面效果结果出现报错。

4、检查代码发现，按钮点击事件，调用animate，这里的样式属性需要使用驼峰结构。

5、再次保存代码并在浏览器查看打印结果，结果发现animated不是函数。

6、返回到HBuilderX工具，修改代码animate，这样就完成了。


 参考技术A $(selector).animate(styles,speed,easing,callback)
参数描述
1.styles    必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值（提供实例）：backgroundPosition,
borderWidth,
borderBottomWidth,
borderLeftWidth,
borderRightWidth,
borderTopWidth,
borderSpacing,
margin,
marginBottom,
marginLeft,
marginRight,
marginTop,
outlineWidth,
padding,
paddingBottom,
paddingLeft,
paddingRight,
paddingTop,
height,
width,
maxHeight,
maxWidth,
minHeight,
minWidth,
font,
fontSize,
bottom,
left,
right,
top,
letterSpacing,
wordSpacing,
lineHeight,
textIndent,
,注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。    
2.speed    可选。规定动画的速度。默认是 "normal"。可能的值：毫秒 （比如 1500）"slow""normal""fast"    
3.easing    可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数：swinglinear扩展插件中提供更多 easing 函数。    
4.callback    可选。animate 函数执行完之后，要执行的函数。

 参考技术B

animate的第二个参数就是用来控制动画速度的，比如：

<script> 
$(document).ready(function()
  $("button").click(function()
    $("div").animate(
      height:'toggle'
    ,1500); //动画将在1.5秒内完成
  );
);
</script>

 参考技术C 你好 控制速度 只需要加一点点就好了 代码如下
$("div").animate(height:"toggle",200） 200的单位是毫秒
希望能帮到你 谢谢本回答被提问者和网友采纳

深入学习jQuery动画控制

 

显示目录
目录
[1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制

前面的话

　　jQuery动画可以使用fade、hide、slide等方法实现基本动画效果，可以使用animate实现自定义动画，甚至可以使用queue实现动画队列。但是，却缺少了对动画控制的介绍。动画产生后，描述动画状态、进行动画延迟、操作动画暂停等都是很重要的功能。本文将详细介绍jQuery动画控制

 

动画状态

　　当用户快速在某个元素多次执行动画时，会造成动画累积的现象。这时，就需要引入动画状态这个概念。判断元素是否处于动画状态中，如果处于，则不添加新动画

is(\':animated\')

　　使用is(\':animated\')方法来判断元素是否处于动画状态

复制代码
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;">></div>
<script>
$(\'#reset\').click(function(){
    history.go();
})
$(\'#btn1\').click(function(event){
  $(\'#box\').animate({\'left\':\'+=100px\'});
});
$(\'#btn2\').click(function(event){
    if(!$(\'#box\').is(\':animated\')){
        $(\'#box\').animate({\'left\':\'+=100px\'});        
    }
});
</script>
复制代码

停止动画

【stop()】

　　stop()方法用于停止匹配元素当前正在运行的动画

stop([queue][,clearQueue][,jumpToEnd])

　　stop()方法可以接受3个可选参数，第一个参数queue表示停止动画队列的名称；第二个参数clearQueue表示是否清空队列中的动画，默认值为false；第三个参数jumpToEnd表示是否当前动画立即完成，默认值为false

【1】当stop()方法不接受任何参数时，将立刻停止当前动画

　　对于hover动画效果来说，经常出现用户把光标移入元素时出发触发动画效果，但当前动画没有结束时，用户已经将光标移出元素。这样移入移出过快会导致动画效果延迟

　　此时，只要在光标移入、移出动画之前加入stop()方法就可以结束当前动画，并立即执行队列中下一个动画

复制代码
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;">>未设置stop的hover动画效果</div>
<div id="box1" style="position:relative;height: 100px;width: 300px;">>设置stop的hover动画效果</div>
<script>
$(\'#reset\').click(function(){
    history.go();
})
$(\'#box\').hover(function(event){
    $(this).animate({\'width\':\'400px\'})
},function(){
    $(this).animate({\'width\':\'300px\'})
});
$(\'#box1\').hover(function(event){
    $(this).stop().animate({\'width\':\'400px\'})
},function(){
    $(this).stop().animate({\'width\':\'300px\'})
});
</script>
复制代码

【2】stop()参数clearQueue表示是否清空队列中的动画，默认值为false

　　当设置该参数为true时，则不仅停止当前动画，而且会清空队列中动画

复制代码
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="btn1">停止当前动画</button>
<button id="btn2">停止当前及后续动画</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;">></div>
<script>
$(\'#reset\').click(function(){
    history.go();
})
$(\'#btn\').click(function(event){
  $(\'#box\').animate({\'left\':\'100px\'},1000).animate({\'width\':\'200px\'},1000);
  $(\'#box\').animate({\'left\':\'0\'},1000).animate({\'width\':\'100px\'},1000);
});
$(\'#btn1\').click(function(event){
    $(\'#box\').stop();
})
$(\'#btn2\').click(function(event){
    $(\'#box\').stop(true);
})
</script>
复制代码

　　【3】stop()参数jumpToEnd表示是否当前动画立即完成，默认值为false

　　当该参数设置为true时，当前动画立即完成

　　stop()相当于stop(false,false)表示停止执行当前动画，后续动画接着进行

　　stop(true,false)表示停止执行当前动画，后续动画不再进行

　　stop(false,true)表示当前动画立即完成，后续动画接着进行

　　stop(true,true)表示当前动画立即完成，后续动画不再进行

复制代码
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input id="btn" type="button" value="开始动画">
<button>stop()</button>
<button>stop(true,false)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<input id="reset" type="button" value="恢复">
<div id="box" style="position:relative;height: 100px;width: 300px;">></div>
<script>
$(\'#reset\').click(function(){
    history.go();
})
$(\'#btn\').click(function(event){
  $(\'#box\').animate({\'left\':\'100px\'},1000).animate({\'width\':\'200px\'},1000);
  $(\'#box\').animate({\'left\':\'0\'},1000).animate({\'width\':\'100px\'},1000);
});
$(\'button\').click(function(event){
    jQuery.globalEval("$(\'#box\')." + $(this).html());
})
</script>
复制代码

【finish()】

　　finish()方法是另一种停止动画的方法，它可以停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

finish([queue])

　　finish()方法可以接受一个可选参数queue表示停止动画队列的名称

　　finish()方法和stop(true,true)很相似，stop(true,true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，finish()会导致所有排队的动画的CSS属性跳转到他们的最终值

复制代码
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input id="btn" type="button" value="开始动画">
<button>finish()</button>
<button>stop(true,true)</button>
<input id="reset" type="button" value="恢复">
<div id="box" style="position:relative;height: 100px;width: 300px;">></div>
<script>
$(\'#reset\').click(function(){
    history.go();
})
$(\'#btn\').click(function(event){
  $(\'#box\').animate({\'left\':\'100px\'},1000).animate({\'width\':\'200px\'},1000);
  $(\'#box\').animate({\'left\':\'0\'},1000).animate({\'width\':\'100px\'},1000);
});
$(\'button\').click(function(event){
    jQuery.globalEval("$(\'#box\')." + $(this).html());
})
</script>
复制代码

动画延迟

　　delay()方法可以用来设置一个延时来推迟执行队列中后续的项

delay(duration[,queueName])

　　duration是delay()方法的必须参数，用于设定下个队列推迟执行的时间，持续时间是以毫秒为单位的，默认值为\'normal\'，代码400毫秒的延时；\'fast\'和\'slow\'分别代表200和600毫秒的延时

　　queueName是delay()方法的可选参数，它是一个队列名的字符串，默认是动画队列fx

复制代码
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">开始动画</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;">></div>
<script>
$(\'#reset\').click(function(){
    history.go();
})
$(\'#btn1\').click(function(event){
  $(\'#box\').animate({\'left\':\'300px\'}).delay(500).animate({\'width\':\'100px\'});
});
</script>
复制代码

全局控制

【jQuery.fx.off】

　　jQuery.fx.off属性可以用来对jQuery动画进行全局控制，默认为undefined，当这个属性设置为true的时候，调用时所有动画方法将立即设置元素为他们的最终状态，而不是显示效果

　　当然，动画可以通过设置这个属性为false重新打开

　　[注意]由于该属性是全局性的，因此在没有动画正在运行或停止所有动画时，此属性的变化才能生效

复制代码
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">开始动画</button>
<button id="btn2">开闭动画</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;">></div>
<script>
$(\'#reset\').click(function(){
    history.go();
})
$(\'#btn1\').click(function(event){
  $(\'#box\').animate({\'left\':\'300px\'},1000).animate({\'width\':\'100px\'},1000);
});
$(\'#btn2\').click(function(){
    $.fx.off = !$.fx.off;
});
</script>
复制代码

【jQuery.fx.interval】

　　jQuery.fx.interval属性可以改变动画的频率，以毫秒为单位

　　这个属性可以设置动画每秒运行帧数，默认是13毫秒。该属性值越小，在速度较快的浏览器中，动画执行的越流畅，但是会影响程序的性能并且占用更多的CPU资源

　　[注意]由于该属性是全局性的，因此在没有动画正在运行或停止所有动画时，此属性的变化才能生效

复制代码
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">开始动画</button>
<button id="btn2">改变动画频率</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;">></div>
<script>
$(\'#reset\').click(function(){
    history.go();
})
$(\'#btn1\').click(function(event){
  $(\'#box\').animate({\'left\':\'300px\'},1000).animate({\'width\':\'100px\'},1000);
});
$(\'#btn2\').click(function(){
    $.fx.interval = 100;
});
</script>
复制代码
好的代码像粥一样，都是用时间熬出来的
标签: jQuery

以上是关于JQUERY的动画animate代码怎么控制它的速度的主要内容，如果未能解决你的问题，请参考以下文章

jquery的animate怎么获取动画的CSS属性呢？

jquery animate 怎么延迟执行

jquery的animate动画的回调函数怎么带参数？

jQuery中动画animate(上)

jquery动画控制非css属性

jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）