jQuery是一个非常强大的 JavaScript 框架。使用 jQuery,我们可以为我们的网站或基于 Web 的应用程序添加特殊效果。
我们可以使用 jQuery 添加各种效果,例如隐藏/显示、淡入淡出效果、动画、回调等等。
用于隐藏/显示、切换、淡入淡出效果。
jQuery 包含多个函数库,这些函数提供了向网页添加动画的技术。这些包括简单动画、标准动画。
在本文中,我们将学习如何将上述效果添加到我们的网页中。
jQuery 动画:
在 jQuery 中,我们可以使用 animate() 方法生成各种类型的动画。这种方法可以在网页中产生简单到复杂的动画。使用动画,我们可以更改 HTML 元素的属性,例如背景颜色、更改边框样式、更改导航属性、格式化字体属性等。
我们通过在方法的 params 参数中提供样式规则来对属性进行更改。
句法:
$("selector").animate({params}, speed, callback);
在哪里
- params 参数指定在 animate() 方法执行期间要更改的 CSS 属性。它是必需的参数。
- speed 参数指定应用效果的速度。它们只能接受以下值:“慢”、“快”或毫秒。
- 回调参数指定animate()方法执行后要执行的函数。
让我们看看它是用 JavaScript 代码实现的:
在此代码中,我们为矩形设置动画并将其形状更改为圆形。
输出:
在单击Animate Me之前
单击Animate Me后
使用 jQuery,我们可以在我们的网页中添加向上或向下滑动效果。幻灯片始终以 div 对的形式出现在网页中。在我们的网页中添加滑动效果的方法有以下三种:
- slideDown() :此方法使元素向下滑动。
句法:$(selector).slideDown(speed,callback);
示例:在本示例中,我们展示了向下滑动效果。如果单击“向下滑动”面板,则对 HTML 元素进行相应的更改。
代码:Silde Down Example
Slide down EffectWelcome to GeeksForGeeks.输出:
下降效应之前
下降效应之后 - slideUp():此方法使元素向上滑动。
句法:$(selector).slideUp(speed,callback);
示例:在本示例中,我们展示了向上滑动效果。如果单击向上滑动面板,则对 HTML 元素进行相应的更改。
代码:Slide Up Example
Slide up EffectWelcome to GeeksForGeeks.输出:
上效果之前
上效果后 - slideToggle() :此方法使元素向上/向下滑动。
如果元素处于向上滑动位置,则会使其向下滑动。
如果元素处于向下滑动位置,则使其向上滑动。
句法:$(selector).slideToggle(speed,callback);
在哪里
- speed 参数指定应用效果的速度。它们只能接受以下值:“慢”、“快”或毫秒。
- 回调参数指定执行特定幻灯片方法后要执行的函数。
示例:在本示例中,我们展示了向上滑动效果。如果单击向上滑动面板,则对 HTML 元素进行相应的更改。
代码:Slide Up/Down Example
Slide up/down EffectWelcome to GeeksForGeeks.输出:
效果前
第一次单击向上/向下条时
第二次单击向上/向下条时