Jquery

jQuery 效果 show() 方法：

实例

显示所有隐藏的 <p> 元素：

$("button").click(function(){

         $("p").show();

});

定义和用法

show() 方法显示隐藏的被选元素。

注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

提示：如需隐藏元素，请查看 hide() 方法

jQuery hide() 方法：

实例

隐藏所有 <p> 元素：

$("button").click(function(){

       $("p").hide();

});

定义和用法

hide() 方法隐藏被选元素。

提示：这与 CSS 属性 display:none 类似。

注释：隐藏的元素不会被完全显示（不再影响页面的布局）。

提示：如需显示隐藏的元素，请查看 show() 方法。

 

jQuery toggle() 方法：

实例

当点击 <p> 元素时进行颜色切换：

$("p").toggle(

function(){$("p").css({"color":"red"});},

function(){$("p").css({"color":"blue"});},

function(){$("p").css({"color":"green"});

});

定义和用法

toggle() 方法在 jQuery 版本 1.8 中被废弃，在版本 1.9 中被移除。

toggle() 方法添加两个或多个函数，以响应被选元素的 click 事件之间的切换。

当在元素上点击时调用第一个指定函数，当再次点击时调用第二个函数，以此类推。

注意：还存在一个名为 toggle() 的 jQuery 效果方法。根据不同的参数决定调用哪个方法。

 

jQuery slideDown() 方法：

实例

以滑动方式显示所有隐藏的 <p> 元素：

$("button").click(function(){
$("p").slideDown();
});

 

定义和用法

slideDown() 方法以滑动方式显示被选元素。

注意：slideDown() 适用于通过 jQuery 方法隐藏的元素，或在 CSS 中声明 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

提示：如需以滑动方式隐藏元素，请查看 slideUp() 方法。

 

jQuery slideUp() 方法：

实例

以滑动方式隐藏所有的 <p> 元素：

$("button").click(function(){
$("p").slideUp();
});.

 

定义和用法

slideUp() 方法以滑动方式隐藏被选元素。

注意：隐藏的元素不会被完全显示（不再影响页面的布局）。

提示：如需以滑动方式显示元素，请查看 slideDown() 方法。

 

jQuery slideToggle() 方法：

实例

在所有 <p> 元素上进行 slideUp() 和 slideDown() 之间的切换：

$("button").click(function(){
$("p").slideToggle();
});

 

定义和用法

slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。

 

jQuery animate() 方法：

实例

通过改变元素的高度，对元素应用动画：

$("button").click(function(){

$("#box").animate({height:"300px"});

});

 

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 " margin: 0px; padding: 0px; line-height: 2em; overflow-wrap: break-word; word-break: break-all; font-size: 13px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgb(51, 51, 51);">提示：请使用 "+=" 或 "-=" 来创建相对动画。