滑动和animate以及如何停止动画
又是一天过去了，今天复习了slideDown、slideUp、slideToggle以及animate和stop的用法。
<!DOCTYPE html>
<html>
<head>
<title>滑动和动画</title>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">
// slideDown(speed,callback);用于向下滑动元素。
// $(function(){
// $('#flip').click(function(){
// $('#panel').slideDown(2000);
// })
// })
// slideUp(speed,callback);用于向上滑动元素；
// $(function(){
// $('#flip').click(function(){
// $('#panel').slideUp();
// })
// })
// slideToggle(speed,callback);切换元素可见状态。
// $().ready(function(){
// $('#flip').click(function(){
// $('#panel').slideToggle(3000);
// })
// }) // animate({params}，speed,callback)
// 必需的params参数定义形成动画的CSS属性
// 接下来我们吧div元素向右移动300px
// 默认情况下所有的HTML元素有一个静态的位置，且是不可移动的，
// 如果需要改变，我们需要将元素的positin属性设置为relative,fixed和
// absolute.
// $(function(){
// $('button').click(function(){
// $('div').animate({left:'300px'},4000);
// })
// })
// 我们可以继续使用animate()来操作多个属性
// animate()几乎可以操作所有的css属性，必需使用camel（峰驼法）格式书写类似于paddingLeft相关的属性。
// 同时，色彩颜色并不包含在核心JQuery库中，如果需要生成颜色动画，需
// 要下载颜色动画插件
// $(document).ready(function(){
// $('button').click(function(){
// $('div').animate({
// left:'300',
// opacity:'0.2',
// width:'100',
// height:'400'
// });
// });
// }); // animate({params},speed.callback);也可以定义相对值（该值
// 相对于元素的当前值），需要在值的前面就加上
// +=或-=
// $(function(){
// $('button').click(function(){
// $('div').animate({
// left:'20px',
// width:'+=20',
// height:'+=20'
// })
// })
// }) // animate()使用预定义的值
// 比如下面的例子高度可以设置成'show','hide','toggle'.
// $(function(){
// $('button').click(function(){
// $('div').animate({
// height:'toggle'
// });
// });
// }); // 默认情况下，JQuery提供针对动画队列功能
// 意味这你在彼此编写多个anmiate()调用，JQuery会
// 创建包含这些方法调用的‘内部’队列，然后逐一运行这些animate调用 // 例子1
// $(document).ready(function(){
// $('button').click(function(){
// var div=$('div');
// div.animate({top:'400',opacity:'0.5'});
// div.animate({left:'400',opacity:'0.2'});
// div.animate({top:'40',opacity:'0.5'});
// div.animate({left:'40',opacity:'1'});
// });
// })
// 例子二:先把div移动，然后放大中间字体
$().ready(function(){
$('button').click(function(){
$('div').animate({
top:'50',
left:'100',
width:'500',
height:'300',
opacity:'0.3'
},3000);
$('div').animate({
fontSize:'100'
},5000);
});
})
</script>
<style type="text/css">
#flip,#panel{
padding: 5px;
text-align:center;
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- <div id="flip">点我滑动</div>
<div id="panel" style="display: block;height: 300px;line-height: 300px;">Hellow World!!</div> -->
<button>开始动画</button>
<div style="position: absolute;width: 200px;height: 200px;background-color: red;">这就是爱爱爱爱！！</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>stop()方法</title>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#flip').click(function(){
$('#panel').animate({
height:'show'
},2000);
$('#panel').animate({
fontSize:'30'
},2000); })
});
$(function(){
$('#stop').click(function(){
$('#panel').stop(false,false);
})
});
// stop(),用于停止动画效果，在它们完成之前
// stop()方法适用于所有JQuery效果函数，包括滑动，淡入淡出和自定义动画
// stop(stopAll,goToEnd)
// stopAll参数规定是否立即清除当前动画，默认是false
// 即仅停止活动的动画，准许任何排入队列的动画向后执行
// （改为true，则该函数所有动画暂停,不管是true还是false,第一个动画已经暂停，控制的是后面队列的函数）
// goToEnd参数规定是否立即完成当前动画，默认false
</script>
<style type="text/css">
div{
padding: 5px;
text-align:center;
background-color: gray;
border: 1px solid black;
}
#panel{
padding: 50px;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel" style="display: none;">Hellow World!</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>案例</title>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">
// slideDown用法
// $(function(){
// $('#flip').click(function(){
// $('#panel').slideDown('slow',function(){
// $('#panel').css('opacity','0.3');
// });
// })
// })
// slideUp用法
// $(function(){
// $('#flip').click(function(){
// $('#panel').slideUp('slow');
// })
// }) // slideToggle用法
// $(function(){
// $('#flip').click(function(){
// $('#panel').slideToggle('slow');
// })
// }) // 停止动画中stop用法 $(function(){
$('#start').click(function(){
$('div').animate({
left:'100px'
},4000);
$('div').animate({fontSize:'60px'},4000);
}) $('#stop').click(function(){
$('div').stop();
})
$('#stop2').click(function(){
$('div').stop(true);
})
$('#stop3').click(function(){
$('div').stop(true,true);
})
})
</script>
<style type="text/css">
div{
padding: 5px;
text-align: center;
background-color: blue;
border: 1px solid black;
}
#panel{
padding: 50px;
}
</style>
</head>
<body> <!-- <div id="flip">点我</div>
<div id="panel" style="display: block;">Hellow World!!</div> --> <button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止动画，但完成动作</button>
<div style="position: absolute;width: 200px;height: 100px;background-color: red;">World!</div>
</body>
</html>
滑动和animate以及如何停止动画的更多相关文章
- 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
- jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链
jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
- jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining
一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...
- jquery中stop停止动画笔记
jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: $(selector).stop( ...
- jQuery停止动画——stop()方法的使用
很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. sto ...
- jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...
- jQuery 效果 – 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动 演示 jQuery stop() 方法. jQuery s ...
随机推荐
- [转]Understanding OpenStack Authentication: Keystone PKI
The latest stable release of OpenStack, codenamed Grizzly, revolutionizes the way user authenticatio ...
- 【RL-TCPnet网络教程】第18章 BSD Sockets基础知识
第18章 BSD Sockets基础知识 本章节为大家讲解BSD Sockets,需要大家对BSD Sockets有个基础的认识,方便后面章节Socket实战操作. (本章的知识点主要整理自 ...
- JAVA基础—适配器设计模式
适配器概念 在计算机编程中,适配器模式将一个类的接口适配成用户所期待的.使用适配器,可以使接口不兼容而无法在一起工作的类协调工作,做法是将类自己包裹在一个已经存在的类中. JDK对适配器设计模式的应用 ...
- java.lang.AbstractMethodError: org.mybatis.spring.transaction.SpringManagedTransaction.getTimeout()Ljava/lang/Integer; 报错解决
我的妈呀 真的是各种报错..... 这个问题 解决方法: https://www.cnblogs.com/beppezhang/p/6118661.html
- Python内置函数(26)——globals
英文文档: globals() Return a dictionary representing the current global symbol table. This is always the ...
- WARNING: 'aclocal-1.14' is missing on your system.
源码安装zabbix agent时进行到make install时报如下错误: WARNING: 'aclocal-1.14' is missing on your system. You shoul ...
- 使用ML.NET实现猜动画片台词
前面几篇主要内容出自微软官方,经我特意修改的案例的文章: 使用ML.NET实现情感分析[新手篇] 使用ML.NET预测纽约出租车费 .NET Core玩转机器学习 使用ML.NET实现情感分析[新手篇 ...
- SignalR学习笔记（一） 简单聊天室
什么是ASP.NET SignalR? ASP.NET SignalR是一个方便程序员添加实时网络通信功能的类库.所谓的实时网络通信功能(Real-time Web Functionality)就是需 ...
- MySQL优化指南
当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 单表优化 除非单表数据未来会一直不断上涨,否则不要一开始就考虑拆分,拆分会带来逻辑.部署.运维的各种复杂度,一般以整型 ...
- 什么是SOAP,有哪些应用
SOAP 是一种轻量级协议,用于在分散型.分布式环境中交换结构化信息. SOAP 利用 XML 技术定义一种可扩展的消息处理框架,它提供了一种可通过多种底层协议进行交换的消息结构. 这种框架的设计思想 ...