使用jquery实现当鼠标浮动到菜单时, 菜单内容向下滑动,速度为1s; 当鼠标离开菜单时, 菜单内容向上滑动,速度为1s。使用slideDown(),slideUp()
时间: 2024-02-27 13:53:12 浏览: 33
可以使用 jQuery 的 `hover()` 方法和 `slideDown()` 方法、`slideUp()` 方法来实现这个效果。
HTML 结构应包含一个菜单容器和一个菜单内容容器,如下所示:
```html
<div class="menu">
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
<div class="menu-content">
<p>菜单内容1</p>
<p>菜单内容2</p>
<p>菜单内容3</p>
</div>
</div>
```
然后在 JavaScript 中可以使用以下代码来实现效果:
```javascript
$(document).ready(function() {
$(".menu").hover(
function() {
$(".menu-content").stop().slideDown(1000);
},
function() {
$(".menu-content").stop().slideUp(1000);
}
);
});
```
解释一下:
- `$(document).ready()` 是等待页面加载完成后执行的函数,确保页面元素已经加载。
- `$(".menu")` 是选中菜单容器。
- `.hover()` 方法接受两个函数,第一个函数是当鼠标进入菜单容器时执行的函数,第二个函数是当鼠标离开菜单容器时执行的函数。
- `$(".menu-content")` 是选中菜单内容容器。
- `.stop()` 方法是停止当前正在进行的动画,避免动画叠加。
- `.slideDown()` 方法是执行向下滑动动画,接受一个参数,即动画的持续时间,这里是 1000 毫秒(1 秒)。
- `.slideUp()` 方法是执行向上滑动动画,接受一个参数,即动画的持续时间,这里是 1000 毫秒(1 秒)。
这样,当鼠标浮动到菜单时,菜单内容会向下滑动,离开菜单时会向上滑动,速度为 1 秒。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)