当前位置：极客教程 > jQuery > jQuery 精品教程 > jQuery 特效

jQuery 特效

jQuery 特效

jQuery特效为您的网站互动性增添了一个X因素。jQuery提供了一个非常简单的界面，用于实现各种令人惊叹的效果，如show、hide、fade-in、fade-out、slide-up、slide-down、toggle等。jQuery方法使我们能够快速应用常用的效果，最小限度地配置。本教程涵盖了创建视觉效果所需的所有重要的jQuery方法。

jQuery效果 – 隐藏元素

jQuery通过 hide() 方法为隐藏元素提供了简单的语法：

$(selector).hide( [speed, callback] );

您可以将任何jQuery 选择器 应用于选择任何DOM元素，然后应用jQuery的 hide() 方法来隐藏它。以下是所有参数的描述，这些参数可以让您对隐藏效果有很好的控制：

  • speed - 该可选参数表示三种预定义速度之一（”slow”、”normal”或”fast”）或以毫秒为单位的动画运行时间（例如1000）。

  • callback - 该可选参数表示在动画完成时执行的函数；对每个被动画化的元素执行一次。

默认的速度持续时间是400毫秒。字符串’fast’和’slow’分别表示持续时间为200毫秒和600毫秒。较高的值表示较慢的动画。

示例

以下是一个示例，当我们点击它时，<div>将隐藏自身。我们使用了1000作为速度参数，这意味着在点击的元素上应用隐藏效果将需要1秒钟。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   (document).ready(function() {("div").click(function(){
         $(this).hide(1000);
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px; cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>Hide Me</div>
   <div>Hide Me</div>
   <div>Hide Me</div>
</body>
</html>

jQuery效果 – 显示元素

jQuery提供了简单的语法来显示一个隐藏的元素，使用 show() 方法：

$(selector).show( [speed, callback] );

您可以使用任何jQuery选择器来选择任何DOM元素，然后使用jQuery的show()方法来显示它。以下是所有参数的描述，这些参数可以控制显示效果：

  • speed − 一个可选的字符串，表示三个预定义速度之一（”slow”、”normal”或”fast”）或者以毫秒为单位的动画运行时间（例如1000）。

  • callback − 这个可选参数表示每当动画完成时要执行的函数；对每个被动画化的元素执行一次。

示例

下面是一个示例，我们将使用两个按钮来操作一个框。我们将使用这两个按钮来显示和隐藏这个框。我们对hide(5000)和show(1000)两个效果使用了不同的速度，以展示效果速度的差异。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   (document).ready(function() {("#show").click(function(){
         ("#box").show(1000);
      });("#hide").click(function(){
         $("#box").hide(5000);
      });
   });
</script>
<style>
   button{cursor:pointer;}
   #box{margin-bottom:5px;padding:12px;height:100px; width:125px; background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on Show and Hide buttons to see the result:</p>

   <div id="box">This is Box</div>
   <button id="hide">Hide Box</button>
   <button id="show">Show Box</button>
</body>
</html>

jQuery特效 – 切换元素

jQuery提供了 toggle() 方法，用于在显示和隐藏之间切换元素的显示状态。如果元素最初是显示的，它将被隐藏；如果是隐藏的，它将被显示。

$(selector).toggle( [speed, callback] );

您可以使用任何jQuery选择器来选择任何DOM元素，然后应用jQuery的toggle()方法来切换它。以下是所有参数的描述，这些参数可以让您对切换效果具有牢固的控制：

  • speed - 一个可选的字符串，表示三种预定义速度（“slow”，“normal”或“fast”）之一，或者以毫秒为单位的动画运行时间（例如1000）。

  • callback - 这是一个可选的参数，表示在动画完成时要执行的函数；对于每个动画的元素，执行一次。

示例

以下是一个示例，我们将使用一个单个的切换按钮来操作一个方块。当我们第一次点击该按钮时，方块变为不可见状态，下次点击按钮时，方块会变为可见状态。我们使用速度参数1000，这意味着应用切换效果需要1秒钟。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   (document).ready(function() {("#button").click(function(){
         $("#box").toggle(1000);
      });
   });
</script>
<style>
   button{margin:3px;width:125px;cursor:pointer;}
   #box{margin:3px;padding:12px; height:100px; width:100px;background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on the Toggle Box button to see the box toggling:</p>

   <div id="box">This is Box</div>
   <button id="button">Toggle Box</button>
</body>
</html>

jQuery特效 – 淡入淡出元素

jQuery给我们提供了两种方法 – fadeIn() 和 fadeOut() ，用于使DOM元素淡入和淡出可见性。

$(selector).fadeIn( [speed, callback] );

$(selector).fadeOut( [speed, callback] );

jQuery的 fadeIn() 方法用于淡入一个隐藏的元素，而 fadeOut() 方法则用于淡出一个可见的元素。下面是对所有参数的描述，这些参数可以控制淡入淡出效果：

  • speed - 一个可选字符串，表示三个预定义速度之一（”slow”, “normal”或”fast”），或者动画运行的毫秒数（比如1000）。

  • callback - 可选参数，表示在动画完成时要执行的函数；每个被动画化的元素执行一次。

示例

以下是一个示例，我们将使用两个按钮来控制一个盒子的显示和隐藏。我们将使用speed参数设置为1000，这意味着应用效果需要1秒钟。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   (document).ready(function() {("#show").click(function(){
         ("#box").fadeIn(1000);
      });("#hide").click(function(){
         $("#box").fadeOut(1000);
      });
   });
</script>
<style>
   button{cursor:pointer;}
   #box{margin-bottom:5px;padding:12px;height:100px; width:150px; background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on fadeOut and fadeIn buttons to see the result:</p>

   <div id="box">This is Box</div>
   <button id="hide">fadeOut Box</button>
   <button id="show">fadeIn Box</button>
</body>
</html>

jQuery效果 – 淡入淡出切换

jQuery提供 fadeToggle() 方法来在多个元素之间切换显示状态，可以在 fadeIn() 和 fadeOut() 方法之间切换。如果元素最初是显示状态，那么切换后将隐藏（即fadeOut()）；如果元素是隐藏状态，切换后将显示（即fadeIn()）。

$(selector).fadeToggle( [speed, callback] );

这个方法提供了与toggle()方法相同的功能，但同时在切换元素时还提供了淡入和淡出的效果。

下面是对所有参数的描述，这些参数可以让您对效果有更多的控制-

  • speed - 一个可选的字符串，表示三个预定义速度之一（”slow”，”normal”或”fast”）或以毫秒为单位运行动画的时间（例如1000）。

  • callback - 可选的参数，表示在动画完成时要执行的函数；对每个已经过动画处理的元素执行一次。

示例

以下是一个示例，我们将通过一个按钮来操作一个正方形盒子。当我们第一次点击此按钮时，正方形盒子会淡出（隐藏），下次点击按钮时，正方形盒子会淡入（可见）。我们将速度参数设置为1000，这意味着应用切换效果需要1秒钟。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   (document).ready(function() {("#button").click(function(){
         $("#box").fadeToggle(1000);
      });
   });
</script>
<style>
   button{margin:3px;width:125px;cursor:pointer;}
   #box{margin:3px;padding:12px; height:100px; width:100px;background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on the Toggle Box button to see the box toggling:</p>

   <div id="box">This is Box</div>
   <button id="button">Toggle Box</button>
</body>
</html>

尝试使用jQuery的 $(selector).toggle() 和 $(selector).fadeToggle() 方法来理解这两种方法之间的细微差异。

jQuery效果 – 滑动元素

jQuery给我们提供了两种方法 slideUp() 和 slideDown() 来分别向上和向下滑动DOM元素。以下是这两种方法的简单语法：

$(selector).slideUp( [speed, callback] );

$(selector).slideDown( speed, [callback] );

jQuery的 slideUp() 方法用于向上滑动元素，而 slideDown() 方法用于向下滑动。以下是关于所有参数的描述，这些参数可以更好地控制效果：

  • speed - 一个可选的字符串，表示三种预定义速度（”slow”、”normal”或”fast”）之一，或以毫秒为单位的动画运行时间（例如1000）。

  • callback - 这个可选参数表示在动画完成时要执行的函数，对于每个进行动画处理的元素执行一次。

示例

以下是一个示例，我们将通过两个按钮来控制一个方框的显示和隐藏。我们使用了速度参数1000，这意味着应用切换效果需要1秒钟。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   (document).ready(function() {("#show").click(function(){
         ("#box").slideDown(1000);
      });("#hide").click(function(){
         $("#box").slideUp(1000);
      });
});
</script>
<style>
   button{cursor:pointer;}
   #box{margin-bottom:5px;padding:12px;height:100px; width:120px; background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on slideUp and slideDown buttons to see the result:</p>

   <div id="box">This is Box</div>
   <button id="hide">slideUp </button>
   <button id="show">slideDown </button>
</body>
</html>

jQuery效果-滑动切换

jQuery提供了slideToggle()方法，用于在slideUp()和slideDown()方法之间切换元素的显示状态。如果元素最初处于显示状态，则会隐藏（即slideUp()）；如果元素已隐藏，则会显示出来（即slideDown()）。

$(selector).slideToggle( [speed, callback] );

这个方法提供了使用 toggle() 方法可以实现同样功能的效果，但是额外提供了切换元素时的向上滑动和向下滑动效果。

以下是所有参数的描述，可以更好地控制效果：

  • speed - 可选字符串，表示三种预定义速度（”slow”，”normal”或”fast”）之一，或以毫秒为单位的动画运行时间（例如1000）。

  • callback - 可选参数，表示动画完成时要执行的函数；对每个动画元素执行一次。

示例

以下是一个示例，在这个示例中，我们将通过一个按钮来操作一个正方形框。当我们第一次点击这个按钮时，正方形框会淡出（隐藏），再次点击按钮时，正方形框会淡入（可见）。我们使用了speed参数为1000，意味着切换效果需要1秒钟。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   (document).ready(function() {("#button").click(function(){
         $("#box").slideToggle(1000);
      });
   });
</script>
<style>
   button{margin:3px;width:125px;cursor:pointer;}
   #box{margin:3px;padding:12px; height:100px; width:100px;background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on the Toggle Box button to see the box toggling:</p>

   <div id="box">This is Box</div>
   <button id="button">Toggle Box</button>
</body>
</html>

尝试使用jQuery $(selector).toggle() 、 $(selector).slideToggle() 和 $(selector).fadeToggle() 方法来理解这三种方法之间的细微差异。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

jQuery 精品教程