显示与隐藏
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.7.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#hide').click(function () {
$('p').hide()
})
$('#show').click(function () {
$('p').show()
})
$('#toggle').click(function () {
$('p').toggle()
})
})
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button id="toggle" type="button">切换</button>
</body>
</html>
淡入淡出
- fadeIn(speed, callback)
- fadeOut(speed, callback)
- fadeToggle(speed, callback)
- fadeTo(speed, opacity, callback)
滑动效果
$(selector).slideDown(speed,callback); // 用于display: none;向下滑动元素 $(selector).slideUp(speed,callback); // 用于向上滑动隐藏元素 $(selector).slideToggle(speed,callback); // 在 slideDown() 与 slideUp() 方法之间进行切换
动画
$(selector).animate({params},speed,callback);
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。