jQuery动画效果学习笔记（8效果）

1，元素的显示和隐藏

显示：无；隐藏
显示：块；显示
简单的显示和隐藏方法

a）显示（）显示
B）隐藏（隐藏）
开关（显示）是隐藏的，显示是隐藏的。

函数f1（）{
隐藏
$（）。
/ / document.getelementbyid（'id'）。风格。显示为无；
}
函数F2（）{
显示
$（）
}
函数F3（）{
$（）。Toggle（）；
}
div {宽度：300px；高度：200px；背景颜色：蓝色；}
鸭子和狗
CSS支持两种显示和隐藏元素的方式，即使用可见性或显示样式，它们控制元素在效果相同时显示和隐藏，但结果不同。

详情如下：

当可见性属性从元素中隐藏时，它保存了文档流中元素的影响，隐藏后未知元素保持不变。
当显示被隐藏时，隐藏元素不再占用文档的位置。
2、幻灯片效果显示与隐藏

SlideUp（速度{，}把元回调）上最终隐藏
SlideDown（速度{，回调}）滑下元最后显示
SlideToggle（回调速度{，}）
速度：设定效果的速度（慢（600）正常（400）快（200）时间（毫秒））

回调函数执行后自动调用回调函数：效果
函数f1（）{
隐藏
$（div），SlideUp（3000，函数（）{（）{）
警惕（我消失了，你能看见吗）；
}）；
}
函数F2（）{
显示
$（div）。slideDown（3000，函数（）{（）{）
警惕（我又回来了）；
}
}
函数F3（）{
$（div）。SlideToggle（1000）；
}
$（函数（）{（））
气缸滑动效应
/ / setInterval（F3（）
}）；
div {宽度：300px；高度：200px；背景颜色：蓝色；}

鸭子和狗
3，淡入淡出

让元素通过一定的透明度改变，以达到显示和隐藏的效果。

FadeIn（速度，{回调}）
FadeOut（速度，{回调}）
对fadetoggle切换效果（速度，{回调}）
FadeTo（速度、透明度，{回调}）套DIV一定程度的透明度（0-1）0.3是30%的透明度

函数f1（）{
隐藏
$（div）。FadeOut（4000）；
}
函数F2（）{
显示
$（div）。FadeIn（4000）；
$（#两）。FadeTo（2000,0.3）；
}

函数F3（）{
$（div）。FadeToggle（2000）；
}
div {宽度：300px；高度：200px；背景颜色：蓝色；}
鸭子和狗
设置透明度，div的透明度为30%：

4。动画效果的底部方法动画（）

动画（）方法的动画效果都在动画（）方法的执行中。
$（动画）（参数的作用，时间，回调函数}）；
一般的jQuery方法，如CSS（），将返回到当前jQuery对象，因此可以通过链调用jQuery的许多方法。
函数f1（）{
文本/文本大小，粗体，div宽度和高度
字体大小、背景颜色、颜色

console.log（$（div））；
jQuery对象称为CSS方法本身或jQuery对象。
执行此关键字的返回的CSS方法
console.log（$（div）。Css（'font-weight '，'bold）。Css（背景颜色

VaR约= { 'font-size：'30px，宽度：'400px，身高：'300px}；
$（div）。Css（'font-weight、大胆）。Css（背景颜色

$（）（动画，2000）；
}

div {宽度：300px；高度：200px；背景颜色：蓝色；}
鸭子和狗

5，累积下来的动画

如果动画设置为左：500次，第一次点击div将向左移动500像素，然后点击第二不会移动。是连续的动态积累减法，只需要改变500px左：左：+ = 500px或左：- = 500px。
（函数（）{（））
$（#面板）。Click（function（）{）
$（这）。动画（{左：+ = 500px}，3000）；
}）
}）

6。多个动画

1。同时执行多个动画

上面的例子只控制左边的属性的变化，控制元素的高度200px当我们控制的剩余财产。
$（函数（）{（））
$（#面板）。Click（function（）{）
$（这）。动画（{左：500px
}）
}）

2。动画的顺序执行

上面例子中的右移和放大高度的两个动画同时进行，现在我们必须向右移动并放大高度，这非常简单。只需将上面的动画（）方法分开，并将其写入两个
$（函数（）{（））
$（#面板）。Click（function（）{）
$（这）。动画（{左：500px}，3000）
。动画（{高度：200px}，1000）；
}）
}）

三.综合动画

然后完成更复杂的动画。单击div元素将其移动到右边，同时增加他的高度，并将其透明度从50%切换到100%，然后让它向上和向下移动，当它完成时它的宽度变大。

经过一些效果，让它淡出的方式。
$（函数（）{（））
$（#面板）。Css（不透明
$（#面板）。Click（function（）{）
$（这）。动画（{左：400px
。动画（{顶：200px
淡出（1000）；
}）
}）
7。动画回调函数

在上面的例子中，如果你想切换CSS样式的最后一步，而不是隐藏元素，那么我们可以使用动画的第三参数回调函数。
$（函数（）{（））
$（#面板）。Css（不透明
$（#面板）。Click（function（）{）
$（这）。动画（{左：400px
。动画（{：200px宽度200px}，3000，（功能）{ $（this）。Css（边界

}）
}）

通过这种方式，CSS方法被添加到动画队列中。

8。停止动画并判断它是否处于动画状态。

1。停止元素的动画

停止（{ } { } clearqueue，结束）两个可选参数，所有的布尔型

参数描述：

ClearQueue：是否明确空动画队列

ToEnd：代表动画是否正在执行的最终状态

通过一个全面的示例，您可以了解停止（）方法的两个参数：
*边距：0；填充：0；}
体{字体大小：13px；线高度：130%；padding: 60px }
#面板{宽度：60px；边框1px solid # 0050d0；身高：22px；溢出：隐藏；}
。头{填充：5px；背景：# 96e555；鼠标指针；宽度：300px；}
。内容{ padding: 10px；文本缩进：2em；边境上：1px solid # 0050d0；显示：块；宽度：280px；}。
$（函数（）{（））
$（）按钮：EQ（0））。Click（函数（）{）
$（#面板）
动画（{：150}，2000）
动画（宽度：300，}，2000）
隐藏（3000）
动画（{
动画（{：500}，2000）；
}）；
$（）按钮：EQ（1））。Click（函数（）{）
$（#面板）（停止）； / /停止当前动画，继续执行下一个动画
}）；
$（）按钮：EQ（2））。Click（函数（）{）
$（#面板）。停止（true）； / /删除所有动画元素
}）；
$（）按钮：EQ（3））。Click（函数（）{）
$（#面板）。停止（false，true）； / /让当前动画直接结束，继续下一个动画
}）；
$（）按钮：EQ（4））。Click（函数（）{）
$（#面板）。停止（真的，真的）； / /删除所有的动画元素，让当前的动画直接底的状态
}）；

}）
启动一系列动画
（停止）
停（真）
停止（错误的，真实的）
停止（真的，真的）

三个王国的战争杀死了世界

夏侯盾的眼睛，对ludon联合，与郭佳司马的深基础

2，确定元素是否处于动画状态。

当使用动画（）方法时，必须避免动画与用户的行为由于动画积累而不一致的现象，当用户在某个元素上执行动画（动画）时，动画就会累积。

解决方案是确定元素是否处于动画状态，当它不处于动画状态时，将向元素添加一个新的动画。

使用：
如果（！$（元素）。
添加新动画
}
通过详细分析8种jQuery动画效果和jQuery动画效果，希望大家喜欢这篇文章，这将全面介绍jQuery动画效果。