jQuery 效果
Posted 自学web网页前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 效果相关的知识，希望对你有一定的参考价值。
注意：jQuery 版本 2 以上不支持 IE6，7，8 浏览器。如果需要支持 IE6/7/8，那么请选择1.9
$(document).ready(function(){
// 开始写 jQuery 代码...
});
简洁写法（与以上写法效果相同）
$(function(){
// 开始写 jQuery 代码...
});
基础语法： $(selector).action()
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）html 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
如：通过 id 选取元素语法：$("#test")
jQuery 事件$('选择器').click(function(){ // 动作触发后执行的代码!!})
其他事件一样，就是将javascript事件中的on去掉（如：onclick-->click,onmouse-->mouse）
jQuery效果有 隐藏、显示、切换，滑动，淡入淡出，以及动画
hide() 和 show() 方法来隐藏和显示 HTML 元素：
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
toggle() 方法来切换 hide() 和 show() 方法
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(/*速度，function(){}*/);
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
这几个方法与上面语法一样
fadeIn() 用于淡入已隐藏的元素。
fadeOut() 方法用于淡出可见元素。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo( speed,opacity,callback) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
slideDown() 方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#000;height:100px;width:100px;position:absolute;">
</div>
</body>
动画效果请参考案例“圣诞”
以上是关于jQuery 效果的主要内容，如果未能解决你的问题，请参考以下文章