jQuery，效果，-，slideToggle()，方法，-，前端极客，-，零基础html源码方法指南

slideToggle() 是 jQuery 中的一个特效方法，它可以使元素在显示和隐藏之间切换，并且具有动画效果。它可以通过绑定点击事件来触发。slideToggle() 方法可以接受两个可选参数，一个是动画持续时间，另一个是回调函数。下面我们来看一下如何使用 slideToggle() 方法。

首先，我们需要引入 jQuery 库，可以从官网下载或使用 CDN 引入：

```

```

接着，我们可以在 HTML 中添加一个按钮和一个需要切换显示和隐藏的元素，如下所示：

```

点击切换

```

然后，我们可以编写一个简单的 jQuery 脚本，来绑定点击事件，并使用 slideToggle() 方法来切换元素的显示和隐藏：

```

$(document).ready(function() {

$("#toggle-btn").click(function() {

$("#toggle-elem").slideToggle();

});

});

```

上面的代码中，我们使用了 document.ready() 方法来确保文档完全加载后再执行脚本。然后我们绑定了按钮的点击事件，并设置了一个回调函数，使用 slideToggle() 方法来切换元素的显示和隐藏。

如果我们希望设置动画持续时间，可以将值以毫秒为单位传递给 slideToggle() 方法，如下所示：

```

$("#toggle-elem").slideToggle(500);

```

上面的代码中，我们设置了动画持续时间为500毫秒。

如果我们希望在切换完元素的显示和隐藏后执行一些其他操作，可以在 slideToggle() 方法中传递一个回调函数，如下所示：

```

$("#toggle-elem").slideToggle(500, function() {

console.log("切换完成");

});

```

上面的代码中，我们在 slideToggle() 方法中传递了一个回调函数，在切换完成后会打印出“切换完成”。

使用 slideToggle() 方法可以为网站增加一些动态效果，使用户体验更加友好。需要注意的是，使用 jQuery 特效方法会增加页面加载时间和 CPU 使用量，因此需要根据实际情况权衡使用。