JQ 基础续

JQ操作class

js操作class

DOM元素 . className

var div1 = document.querySelector("div");
div1.className = "bgc fontS fontC";
div1.className = "fontS";

JQ操作class

设置class

Jq对象.addClass("class名1 class名2 ...");
Jq对象.addClass(function(){});

删除class

Jq对象.removeClass("class名1 class名2 ...");
Jq对象.removeClass(function(i){});

例：

$("div").addClass("bgc");
$("div").addClass(function(i){// 该函数会根据JQ对象里dom元素的个数重复调用, 每次调用时, 函数的返回值就是给当前DOM元素设置的class// 那么如果每次都能调用一个函数, 那么函数里可以根据逻辑书写任意代码, 灵活, 或者可以对不同的元素或者不同的情况, 赋值不同的classreturn classArr[i];
});$("div").removeClass(function(i){if (i % 2) {return "fontC";}else {return "bgc";}
});
$("div:eq(0)").removeClass("bgc fontC");

JQ动画

例：

<style type="text/css">* {margin: 0;padding: 0;
}
body {overflow: hidden;
}
div {width: 200px;height: 200px;float: left;
}
#a {background-color: red;
}
#b {background-color: yellow;
}
#c {background-color: blue;
}
#d {background-color: cyan;
}
</style><button onclick="animate1()">显示</button><div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<hr style="clear: both;"/>
<div id="d"></div>

显示隐藏动画

隐藏 hide()

显示 show()

显示/隐藏 toggle()

//参数 slow,normal,fast,数值（以毫秒为单位）
//对元素使用带参数的show()和hide()是从：高度，宽度，不透明度  三个属性同时进行操作的。
function animate1() {$("#a").show(1000);$("#b").show("slow"); // fast normal slow$("#c").show(2000, function(){alert("show动画执行结束!");});
}

淡入淡出动画

淡出 fadeOut()

淡入 fadeIn()

淡入/淡出 fadeToggle

淡出到 fadeTo()

function animate6() {$("#a").fadeToggle(1000);$("#b").fadeToggle("slow"); // fast normal slow$("#c").fadeToggle(2000, function(){alert("fade动画执行结束!");});
}
function animate7() {// 淡出到, 可以规定一个opacity, 元素到达此opacity停止透明度的变化$("#a").fadeTo(1000, 0.4);$("#b").fadeTo("slow", 0.6); // fast normal slow$("#c").fadeTo(2000, 0.3, function(){alert("fade动画执行结束!");});
}

上拉下拉动画

上拉 slideUp

下拉 slideDown

上拉/下拉 slideToggle

//)只改变元素的高度
function animate10() {$("#a").slideToggle(1000);$("#b").slideToggle("slow"); // fast normal slow$("#c").slideToggle(2000, function(){alert("slide动画执行结束!");});
}

自定义动画

/* animate({样式1:"值1",样式2:"值2",...
}, 动画时长(毫秒数), 动画执行完毕的回调函数(可选))注意:
1. 只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）
2. 使用 "+=" 或 "-=" 来创建相对动画（relative animations）。
*/function animate11() {$("#d").animate({width:"+=50",height:"+=50",}, 1000, function(){alert("div#d动画执行完毕!");});
}

动画组

让动画的样式分步执行.参考关键帧动画只需要多次调用animate即可, 每次只改变一个样式

function animate12() {$("#d").animate({width:300}, 1000).animate({height:300}, 500).animate({borderRadius:"50%"}, 1500).animate({marginLeft:300}, 800, function(){alert("所有动画执行结束");})
}

JQ 操作class+动画篇相关推荐

Android源码解析(一)动画篇-- Animator属性动画系统
Android源码解析-动画篇 Android源码解析(一)动画篇-- Animator属性动画系统 Android源码解析(二)动画篇-- ObjectAnimator Android在3.0版本中 ...
iOS 开发之动画篇 - 从 UIView 动画说起
毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 -- 这对于app而言是非常重要的. 本文作为动画文集的第一篇, ...
iOS 自定义转场动画篇
前言: 自定义转场动画其实并不难, 关键在于能够明白思路, 也就是操作步骤. 本篇博客主要以present转场动画为例, 进行分析, 操作, 如有错误欢迎简信与我交流. 不进行修改的话, presen ...
少儿编程Scratch学习教程5--基本操作(二)动画例子
本篇介绍下动画相关例子 1.表情的转换首先创建一个精灵角色之后在外观选项中,选择"将造型切换为...",这样就可以在特定情况下就可以更换造型了添加一个事件,当按下" ...
自定义控件三部曲之动画篇(八)——PropertyValuesHolder与Keyframe
前言:只有比牛人跑的更快,才有可能追上他的脚步. 相关文章: <Android自定义控件三部曲文章索引>:http://blog.csdn.net/harvic880925/article ...
ANDROID L——Material Design详解（动画篇）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
iOS 开发之动画篇 - Transform和KeyFrame动画
原文发布于http://www.jianshu.com/p/a071bba99a1b 序言追求美好是人的天性,这是猿们无法避免的.我们总是追求更为酷炫的实现,如果足够仔细,我们不难发现一个好的动画通 ...
iOS 动画篇 - CAAnimation初识
文章目录 CAAnimation是什么? 认识 CAAnimation CABasicAnimation 基础动画 CAKeyframeAnimation 关键帧动画 CAAnimationGroup ...
git 回滚到某个commit_Git 整理 v1.0 | Git 操作整理进阶篇
多选参数-小林翻唱,请多多支持,附上网易云链接:https://music.163.com/#/song?id=1441451111 0. 前言这是程序锅对之前学习和使用 Git 做的一份整理,后头 ...

JQ 操作class+动画篇

JQ 基础续

JQ操作class

JQ动画

JQ 操作class+动画篇相关推荐

最新文章

热门文章