学步园

<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
<script type="text/javascript" defer>

//如无任何参数则改变指定对象显示状态，当前如果是显示的就变成隐藏相当hide()，隐藏的就变成显示的相当show()。
//括号里也可输入"slow", "normal", "fast"或毫秒值，指定时间内改变显示状态。
$("#text1").toggle();

//输入一个毫秒值或"slow", "normal", "fast"，再在后面捆绑一个函数，在指定时间内改变对象的显示状态之后执行捆绑的函数。
$("#text1").toggle(2000,function(){
    //alert();
});

//或者给一个布尔值或返回布尔值的表达式，真则显示，假则隐藏
$("#text1").toggle(3>2);

//隐藏，给参数的话单位是毫秒，没参数立即隐藏，也可直接输入"slow", "normal", "fast"，并捆绑一个方法，在改变显示状态后执行
$("#text1").hide("normal",function(){
    //alert('hide');
});

//显示
$("#text1").show(1000);

//fadeOut()淡出效果
$("#text1").fadeOut(1000);

//fadeIn()淡入效果
$("#text1").fadeIn('slow');

//在指定时间内改变对象的透明度0.33相当1/3可见度,与其他显示隐藏效果不同的是就算完全隐藏仍然占据原有位置。
$("#button1").fadeTo(5000,0.33);

//缩减高度最后隐藏
$("#text1").slideUp("fast");

//增加高度显示
$("#text1").slideDown("fast");

//通过高度变化最终改变显示状态
$("#text1").slideToggle("slow")

//使用animate实现简单的动画效果
$("#divPop").animate(
    {
        //在这个中括号里可以填CSS样式及在指定时间内达到的值
        //opacity透明度，1为不透明，也可天"hide"完全透明
        "opacity": "hide",

        //top距离窗口顶端的距离还有"width"，"height"等属性
        //$(window).height()当前窗口高度值，$("#divPop").height()指定对象高度值，$("#divPop").position().top指定对象距离窗口高度值
        "top": $(window).height() - $("#divPop").height() - $("#divPop").position().top
    },
    //1000毫秒
    1000,
    //捆绑的方法
    function() {
        $("#divPop").hide();
    }
);

//立即停止动画效果
//$("#divPop").stop();

//针对全局动画效果true则全局动画立即执行完到最终效果，false则执行动画效果，此语句要放到所有动画执行语句之前才起作用
$.fx.off=true;
</script>

<input type="text" id="text1" value="abc"/>
<input type="button" id="button1" value="button" />

<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000;
        width: 300px; height: 100px; position:absolute;">
        <div style="text-align: center;">弹出层</div>
</div>