jQuery 学习笔记（二 ）

1.控制组件的显示与隐藏

<script type="text/javascript">
  $(document).ready(function() {
  $("#mInput").click(function() {

$("p#a").toggle(500,fun1()); //指定执行时间,执行完毕后的回调函数

   //$("p#a").toggle(500); //指定执行时间

});
});

</script>

<input type="button" id="mInput" value="commit" />
<p id="a">a</p>

2.JQuery 滑动

1.根据组件id滑动

<script type="text/javascript">
  function fun1() {

  $("#myP").slideToggle("slow");

}
</script>

<p  id="myP">选择</p>
<div >a</div>
<input type="button" value="click me" id="btn" οnclick="fun1()" />

2.根据class 滑动

2.1 添加css样式属性

<style type="text/css">
  div.bottom,p.top {
     margin: 0px;
     padding: 5px;
     text-align: center;
    background: #e5eecc;
   border: solid 1px #c3c3c3;
}
</style>

2.2 引用样式

<p class="top"  id="myP">选择</p>
<div class="bottom">a</div>
<input type="button" value="click me" id="btn" οnclick="fun1()" />

2.3

<script type="text/javascript">
  function fun1() {

    $(".bottom").slideToggle("slow");

}

2.4 停止动画(  stop()  )

$(".bottom").stop();

3.JQuery 动画

tip:要实现动画首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

3.1 

div.blocks {
  background: #e5eecc;
  width: 100px;
  height: 100px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

3.2

<div class="blocks" id="moveId">移动</div>

<input type="button" value="click me" id="btn" οnclick="fun2()" />

3.3

function fun2() {
  $("#moveId").animate({
    left: '200px', //平移
    opacity: '0.5', //透明度
    height: '150px', //设置高
    width: '150px',  //设置宽
    //height:'toggle', //隐藏|显示高度
    // width:'toggle',  //隐藏|显示长度
  });
}

4.animate() - 使用队列功能

function fun3(){
var ele=$("#moveId");   // 依次执行
ele.animate({width:'110px'});   
ele.animate({width:'120px'});
ele.animate({width:'130px'});
ele.animate({width:'140px'});
}

<div class="blocks" id="moveId">移动</div>

<input type="button" value="click me" id="btn" οnclick="fun3()" />