jQuery特效动画

红太狼 2022-03-21 12:18 257阅读 0赞

jQuery提供了很多动画效果：

*  控制元素显示与隐藏
 *  控制元素淡入和淡出
 *  控制元素滑动
 *  自定义动画

一. 控制元素显示和隐藏  
以前可以通过css()方法改变元素的display属性的值达到显示（block）和隐藏（none）元素的目的。在jQuery中，提供了专门的方法控制元素的显示和隐藏，并且增加了动画效果。  
show（）等同于

$(selector).css("display","block");

除了可以控制元素的显示外，还能定义显示元素时的效果，如显示速度  
语法格式：

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>speed</td> 
   <td>可选，规定元素从隐藏到完全可见的速度，默认为0。可能值：毫秒，slow，normal，fast。在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变高度，宽度，外边距，内边距和透明度</td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td>可选，show函数执行完后要执行的函数</td> 
  </tr> 
 </tbody> 
</table>

hide（）与show（）方法相反，参数也是一样，常成对使用。

二，切换元素可见状态  
复合事件中的toggle（） 方法，除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态，如果元素可见，单击切换后隐藏元素  
关键代码：

从代码运行效率考虑，使用toggle（）方法替代show（）和hide（）方法制作轮流切换元素的可见状态，更好。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]  
比如京东的鼠标悬浮到一级菜单时，二级菜单显示，鼠标离开，二级菜单消失  
**关键代码**

index=$(".inner-box").index($(this));//获取当前悬浮的index值
    $(".erji-box div").eq(index).show();  //让相应二级内容显示
    $(".erji-box div").eq(index).siblings().hide(); //所有相应二级的同辈元素隐藏

二, 控制元素淡入和淡出  
fadeIn()方法控制元素淡入

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

参数和上面一样  
fadeOut()方法控制元素淡出

切换元素出入状态  
切换元素的淡入淡出状态的方法——fadeToggle()方法，如果元素已经淡出，fadeToggle()会向元素添加淡入效果，如果元素已经淡入，会向元素添加淡出效果，用法与toggle（）相同。

**注意：jQuery中所有动画效果，都可以设置slow，normal，fast(0.6秒，0.4秒和0.2秒），这些要用双引号括起来，如fadeIn(“normal”)，而使用时间数值作为速度参数，不需要使用双引号。时间数值单位为毫秒。**

三， 控制元素滑动  
slideDown(),slideUp()参数和上面一致，常用于选项卡，下拉菜单和提示信息等

同样也存在一个slideToggle()方法

四， 自定义动画

animate（）用来创建自定义动画

$(selector).animate({params},speed,callback);

params必选，定义形成动画的CSS属性  
后面的两个参数和前面的一样

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]: /images/20220321/431d92789055495fbf4044cd053ab5b6.png