【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

1.jquery隐藏and显示事件

$("p").hide();      //隐藏事件
$("p").hide(1000); //1秒内缓慢隐藏
$("p").show();      //显示事件
$("p").toggle();    //在隐藏和显示中切换

隐藏后显示提示callback

$("p").hide(function(){
alert("提示消息已经隐藏");
});

$("p").hide(1000,function(){
alert("1s内缓慢隐藏并提示消失已经隐藏");
});

2.淡入淡出

$("#div1").fadeIn();   //淡入
$("#div2").fadeIn("slow");   //缓慢淡入
$("#div3").fadeIn(3000);    //延迟3秒淡入

$("#div").fadeOut() //淡出

$("#div").fadeToggle() //淡入淡出

$("#div3").fadeTo("slow",0.7); //设置淡化程度 0完全消失，1不淡化

3.滑入滑出

$(".panel").slideDown(); //向下滑动显示class=panel的div

$(".panel").slideUp("slow"); //向上收起class=panel的div

$(".panel").slideToggle("slow"); //点击显示，再点击收起

例子如下：

<head>

</head>

<body>
<div class="panel">
<p>显示隐藏的div</p>
<p>请大家关注我的博客</p>
</div>
<p class="flip">点击显示，再次点击隐藏</p>
</body>

4.动画animate

首先，说明一下为什么要调用animate，而不是直接修改css属性：用animate可以缓慢的修改div的样式，动画效果更加美观，而直接修改css则是加载闪烁直接完成，效果不佳。

默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

例子：

<head>
<script>
$(document).ready(function(){
$("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5', //淡化
      height:'150px',
      width:'150px'

//height:'+=150px', //可使用相对值
//width:'+=150px'

//height:'toggle',           //使用预定值，从消失到显示
      //width:'toggle'
    });
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>

分步动画

5.停止动画

$("div").stop(); //按钮会停止当前活动的动画，但允许已排队的动画向前执行。

$("div").stop(true); //按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。

$("div").stop(true,true); //会立即完成当前活动的动画，然后停下来。