1. jQuery 隐藏与显示 DOM
2. jQuery 淡入和淡出 DOM
3. jQuery 滑动 DOM
4. jQuery 动画
5. jQuery callBack 回调方法
6. jQuery 暂停动画
<script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function(){ $("#p1").show(); //显示 }); $("#b2").click(function(){ $("#p1").hide(); //隐藏 }); $("#b3").click(function(){ $("#d1").fadeOut(); //淡出 }); $("#b4").click(function(){ $("#d1").fadeIn(); //淡入 }); $("#b5").click(function(){ // $("#d1").fadeToggle(); //淡入淡出开关,淡出状态时点击就淡入 // $("#d1").fadeToggle("slow"); //速度慢 $("#d1").fadeToggle(10000); //指定速度 10s }); $("#b6").click(function(){ $("#d1").fadeTo("slow",0.1); // 透明度 取值范围0-1,透明度依次减弱,0.1很透 }); $("#b7").click(function(){ $("#d4").slideDown("slow"); // 向下滑动 }); $("#b8").click(function(){ $("#d4").slideUp("slow"); // 向上滑动 }); $("#b9").click(function(){ $("#d5").animate({left:'500px'},'slow'); //移动( position 要设为 absolute 相对的 ) }); $("#b10").click(function(){ // 移动时透明度啥的属性改变 $("#d5").animate({ left:'500px', opacity:0.5, height:'150px', width:'150px' },'slow'); }); $("#b11").click(function(){ $("#d5").animate({ left:'500px', opacity:0.5, height:'+=150px', // 逐渐变大 width:'+=150px' },'slow'); }); $("#b12").click(function(){ $("#p2").show(function(){ // 回调事件 alert("小日本出来了!"); }); });
$("#b13").click(function(){ $("#d6").animate({left:'500px'},'slow'); //向左移动 }); $("#b14").click(function(){ $("#d6").stop(); // 停止 }); }); </script>