jQuery的slideToggle方法实例

复制代码 代码如下:

  <title></title>

  <style type="text/css">

  .imgclass{ width:300px; height:300px; border:solid 1px red;}

  </style>

  <script src="jquery-1.9.1.js" type="text/javascript"></script>

  <script type="text/javascript">

  $(function () {

  $('#Button1').bind('click', function () {

  $('img').slideUp(2000);

  })

  $('#Button2').bind('click', function () {

  $('img').slideDown(2000);

  })

  $('#Button3').bind('click', function () {

  $('img').slideToggle(2000);

  })

  })

  </script>

  </head>

  <body>

  <div>

  <div>

  <input id="Button1" type="button" value="上拉" /><input id="Button2" type="button" value="下拉" /><input id="Button3" type="button" value="自动上拉下拉" /></div>

  <div><img src="images/1.jpg" class="imgclass"/></div>

  </div>

  </body>