jquery基本效果

来源：互联网发布：spss无法输入数据编辑：程序博客网时间：2024/05/02 00:06

（1）隐藏与显示

1.简单隐藏与显示

<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){  $("#hide").click(function(){    $("p").hide();  });  $("#show").click(function(){    $("p").show();  });});</script></head><body><p>如果你点击“隐藏” 按钮，我将会消失。</p><button id="hide">隐藏</button><button id="show">显示</button></body></html>

2.隐藏与显示切换

$("button").click(function(){  $("p").toggle();});

3.隐藏与显示的速度

以上3个方法都可以设置隐藏和显示的速度，如

$(selector).toggle(speed,callback);

其中的speed可以取fast、slow或者毫米数
callback是隐藏或显示完成之后的回调函数

$("button").click(function(){  $("p").hide(1000);});

（2）淡入淡出

1.淡入（也就是慢慢显示）

语法格式如下：

$(selector).fadeIn(speed,callback);

speed可取fast、slow或毫秒数，callback是显示之后的回调函数

<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("#div1").fadeIn();    $("#div2").fadeIn("slow");    $("#div3").fadeIn(3000);  });});</script></head><body><p>Demonstrate fadeIn() with different parameters.</p><button>Click to fade in boxes</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html>

2.淡出（也就是慢慢隐藏）

$("button").click(function(){  $("#div1").fadeOut();  $("#div2").fadeOut("slow");  $("#div3").fadeOut(3000);});

3.淡入淡出切换

$("button").click(function(){  $("#div1").fadeToggle();  $("#div2").fadeToggle("slow");  $("#div3").fadeToggle(3000);});

4.不完全淡出

可以通过调整透明度来实现

格式如下：

$(selector).fadeTo(speed,opacity,callback);

其中opacity为透明度，为0-1之间

$("button").click(function(){  $("#div1").fadeTo("slow",0.15);  $("#div2").fadeTo("slow",0.4);  $("#div3").fadeTo("slow",0.7);});

（3）滑动

1.向下滑动（实际上就是显示）

语法：

$(selector).slideDown(speed,callback);

speed为显示的速度

<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){  $("#flip").click(function(){    $("#panel").slideDown("slow");  });});</script> <style type="text/css"> #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel{padding:50px;display:none;}</style></head><body> <div id="flip">Click to slide down panel</div><div id="panel">Hello world!</div></body></html>

2.向上滑动（实际上就是隐藏）

$("#flip").click(function(){  $("#panel").slideUp();});

3.向上向下滑动切换

$("#flip").click(function(){  $("#panel").slideToggle();});

（4）动画

1.简单使用

语法：

$(selector).animate({params},speed,callback);

params中是最终的css属性

<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){  $("button").click(function(){    $("div").animate({left:'250px'});  });});</script> </head> <body><button>Start Animation</button><p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>

注意：默认的html位置是不能改变的，所以必须要将css position属性设置为relative\fixed\absolute

2.操作多个属性

$("button").click(function(){  $("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });});

3.使用相对值
也就是相对于当前值的值

$("button").click(function(){  $("div").animate({    left:'250px',    height:'+=150px',    width:'+=150px'  });});

4.使用队列功能
也就说动画挨个执行

$("button").click(function(){  var div=$("div");  div.animate({left:'100px'},"slow");  div.animate({fontSize:'3em'},"slow");});

5.终止动画
语法

$(selector).stop(stopAll,goToEnd);

stopAll：也就是是否清除这个动画后面所有的动画，默认是false，即只停止当前的，后面继续执行
gotoEnd：是否立即完成动画，默认为false

0 0