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" onclick="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" onclick="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" onclick="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" onclick="fun3()" />