jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】

一、显示与隐藏

1. 显示元素

使用 show() 方法可以将元素显示出来，让元素从隐藏状态转变为显示状态。例如：

$("#myDiv").show();  // 将 ID 为 myDiv 的元素显示出来

2. 隐藏元素

使用 hide() 方法可以将元素隐藏起来，让元素从显示状态转变为隐藏状态。例如：

$("#myDiv").hide();  // 将 ID 为 myDiv 的元素隐藏起来

3. 切换元素的显示与隐藏

使用 toggle() 方法可以在显示和隐藏之间切换元素的状态。例如：

$("#myDiv").toggle();  // 切换 ID 为 myDiv 的元素的显示与隐藏状态

二、淡入淡出

1. 淡入

使用 fadeIn() 方法可以将元素由透明度为 0 的状态平滑淡入到指定的透明度，并且让元素从隐藏状态转变为显示状态。例如：

$("#myDiv").fadeIn();  // 将 ID 为 myDiv 的元素淡入显示

2. 淡出

使用 fadeOut() 方法可以将元素由指定的透明度平滑淡出，最终呈完全透明的状态，并且让元素从显示状态转变为隐藏状态。例如：

$("#myDiv").fadeOut();  // 将 ID 为 myDiv 的元素淡出隐藏

3. 淡入淡出切换

使用 fadeToggle() 方法可以在淡入和淡出之间切换元素的状态。例如：

$("#myDiv").fadeToggle();  // 切换 ID 为 myDiv 的元素的淡入和淡出状态

三、滑动

1. 滑动显示

使用 slideDown() 方法可以让元素通过滑动方式从隐藏状态向下展开，并从上往下占据空间，最终呈现完整的元素。例如：

$("#myDiv").slideDown();  // 将 ID 为 myDiv 的元素以滑动方式展开显示

2. 滑动隐藏

使用 slideUp() 方法可以让元素通过滑动方式向上收起，最终呈现完全隐藏的状态。例如：

$("#myDiv").slideUp();  // 将 ID 为 myDiv 的元素以滑动方式收起隐藏

3. 滑动切换

使用 slideToggle() 方法可以在滑动显示和滑动隐藏之间切换元素的状态。例如：

$("#myDiv").slideToggle();  // 切换 ID 为 myDiv 的元素的滑动展开和收起状态

四、动画

使用 animate() 方法可以对元素进行复杂的动画效果的自定义设置，例如移动、旋转、放大缩小等等。下面是一个移动动画的示例：

$("#myDiv").animate({left: '250px'});  // 将 ID 为 myDiv 的元素向右移动 250 像素

同时，多个动画效果也可以同时设置，例如：

$("#myDiv").animate({
    left: '250px',  // 向右移动 250 像素
    opacity: '0.5',  // 透明度变为 0.5
    height: '150px',  // 高度变为 150 像素
    width: '150px'  // 宽度变为 150 像素
});

以上就是 jQuery 常用特效的示例小结，涵盖了显示与隐藏、淡入淡出、滑动、动画等功能。实际使用中，可以根据不同的场景选择合适的特效实现，让页面具有更好的交互效果。