Query 一些简单的效果
Query 一些简单的效果
$(selector).hide(speed,callback); 隐藏
$(selector).show(speed,callback); 显示
$(selector).toggle(speed,callback); 切换
淡入
$(selector).fadeIn(speed,callback); 淡出
$(selector).fadeToggle(speed,callback); 切换
$(selector).fadeTo(speed,opacity,callback); 淡入（淡出）到（透明度）
$(selector).slideDown(speed,callback); 向下滑动
$(selector).slideDown(speed,callback); 向上滑动
$(selector).slideToggle(speed,callback); 切换
$(selector).animate({params},speed,callback); 自定义动画
实例：操作多个属性
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$(selector).stop(stopAll,goToEnd); 停止滑动
stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
方法链接
$
最新文章
- windows 环境下wamp环境的搭建。
- WPF 动态布局Grid
- C++简单使用Jsoncpp来读取写入json文件
- LVS的DR模式配置
- Wordpress固定链接设置
- Python-S13作业-day4-之登陆，管理后台
- C#操作office进行Excel图表创建，保存本地，word获取
- 微软http api说明书地址
- Plan : 破晓
- puppet的配置清单书写
- SpringMVC创建HelloWorld程序
- android获取手机机型、厂商、deviceID基本信息
- HBase——HMaster启动之一(HMaster的构建)
- MySQL - 常见的存储引擎
- nginx url问题
- windows linux hosts文件的配置，开发项目中域名跳转等。
- PHP 获取IP地址位置信息「聚合数据API」
- 使用Google-Colab训练PyTorch神经网络
- oozie 运行demo
- mysql索引使用策略及优化