停止效果
在jQuery中,提供了stop()方法用于停止动画或效果,在它们完成之前。stop()方法适用于所有的jQuery效果函数,包括滑动淡入淡出和自定义动画。
语法:$(selector).stop(stopAll,goToEnd);
stopAll和goToEnd 参数都是可选的。前者规定是否应该清除动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行;后者规定是否立即完成当前动画,默认是false。
所以默认地stop()会清除在被选元素上指定的当前动画
示例如下:
(1)描述
在滑动过程中点击按钮,停止滑动。
(2)代码实现
...省略代码
<script type="text/javascript">
$(function(){
$("#flip").click(function(){
$("#panel").slideToggle(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
})
</script>
...省略代码
### 动画效果
<button id="stop">停止滑动</button>
<div id="flip">
点击这里,向下滑动面板
</div>
<div id="panel">
Hello world!
</div>
...省略代码
任务:把上面jQuery中的操作在代码框中重现。