📜  jQuery |动画、幻灯片方法与示例

📅  最后修改于: 2021-11-24 05:22:18             🧑  作者: Mango

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 幻灯片:

使用 jQuery,我们可以在我们的网页中添加向上或向下滑动效果。幻灯片始终以 div 对的形式出现在网页中。在我们的网页中添加滑动效果的方法有以下三种:

  • slideDown() :此方法使元素向下滑动。
    句法:
    $(selector).slideDown(speed,callback);

    示例:在本示例中,我们展示了向下滑动效果。如果单击“向下滑动”面板,则对 HTML 元素进行相应的更改。
    代码:

    
    
    
    
    
    
    
    

    Silde Down Example

    Slide down Effect
    Welcome to GeeksForGeeks.

    输出:
    下降效应之前

    下降效应之后

  • slideUp():此方法使元素向上滑动。
    句法:
    $(selector).slideUp(speed,callback);

    示例:在本示例中,我们展示了向上滑动效果。如果单击向上滑动面板,则对 HTML 元素进行相应的更改。
    代码:

    
    
    
    
    
    
    
    

    Slide Up Example

    Slide up Effect
    Welcome to GeeksForGeeks.

    输出:
    上效果之前

    上效果后

  • slideToggle() :此方法使元素向上/向下滑动。
    如果元素处于向上滑动位置,则会使其向下滑动。
    如果元素处于向下滑动位置,则使其向上滑动。
    句法:
    $(selector).slideToggle(speed,callback);

    在哪里

    • speed 参数指定应用效果的速度。它们只能接受以下值:“慢”、“快”或毫秒。
    • 回调参数指定执行特定幻灯片方法后要执行的函数。

    示例:在本示例中,我们展示了向上滑动效果。如果单击向上滑动面板,则对 HTML 元素进行相应的更改。
    代码:

    
    
    
    
    
    
    
    

    Slide Up/Down Example

    Slide up/down Effect
    Welcome to GeeksForGeeks.

    输出:
    效果前

    第一次单击向上/向下条时

    第二次单击向上/向下条时