0
点赞
收藏
分享

微信扫一扫

Jquery中关于动画的一些操作函数


首先是介绍函数:

第一个函数是: slideDown()是用于向下滑动元素。完整的函数是这样的slideDown(speed,callback);

speed是规定效果的时长。

callback是滑动完成之后的所执行的函数的名称。

第二个函数是:slideUp();这个函数是用于向上滑动的元素。函数的完整版是:slideUp(speed,callback);

第三个函数是slideToggle();这个函数是当元素向下滑动,则slideToggle是向上滑动他们。

当元素向上滑动的时候,slideToggle是向下滑动他们。

上面的是滑动元素,我们也可以更为自由的是设置动画怎样来设置动画

设置动画是用到的animate()这个函数。其实所谓的创建动画可以认为是改变元素的属性,在这个地方我们应该记住的

一个属性是opacity这个是设置元素的透明度,并且这个值的范围是0到1.我们可以操作一个属性,也可以让多个属性都产生个人都产生动画。而且我们可以使用相对值,这个在下面的例子中都有提到。还有就是我们的动作是可以产生

串联的。具有队列功能。

而且我们也可以让动画停止。利用的到的函数是stop这个函数。

<!DOCTYPE html>
<html>
<head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
     <meta charset="utf-8">
     <style type="text/css">
      body, p
      {
      padding: 0;
      border:0px;
      margin: 0px;
      }
      .div1
      {
        width: 100%;
        height: 20px;
           background-color:#BBE644;
           text-align: center;
      }
      .hr1
       {
          margin-top:-5px;
          border:5px solid #BBCA92;
           margin-bottom:-5px;
       }
       .div2
       {
          display:none;
          width: 100%;
          height: 100px;
           background-color:#BBE644;
           text-align: center;
       }
     </style>
     <script type="text/javascript">
     /*$(document).ready(function(){
       $(".div1").click(function(){
        $(".div2").slideDown("slow");
      });
      });
      $(document).ready(function(){
         $(".div1").dblclick(function(){
             $(".div2").slideUp();
         });
      });
      $(document).ready(function(){
         $(".div1").click(function(){
             $(".div2").slideToggle();
         });
      });
      $(document).ready(function(){
         $(".div3").click(function(){
             $('.div3').animate({left:'250px'});
         });
      });
      $(document).ready(function(){
         $("button").click(function(){
           $(".div3").animate({
            left:'250px',
            opacity:'0.5',
            height:'150px',
            width:'150px'
           });
         });
      });*/
      /*$(document).ready(function(){
          $("button").click(function(){
             var div=$("div");
             div.animate({height:'300px',opacity:'0.4'},'slow');
             div.animate({width:'300px',opacity:'0.4'},'slow');
             div.animate({height:'100px',opacity:'0.4'},'slow');
             div.animate({width:'100px',opacity:'0.4'},'slow');
          });
      });
       $("document").ready(function(){
          $("button").click(function(){
          $("#div6").animate({
          width:"+=300px",
          height:"+=400px"
               });


          });
      });*/
       $(document).ready(function(){
          $("#btn1").click(function(){
              $("#div6").animate({
              // 这个要知道的是里面必须用双引号
              width: "+=150px",
              height:"+=190px"
              });
          });
       });
     $(document).ready(function(){
          $("#div5").click(function(){
              $("#div6").slideToggle(5000);
          });
     });
     $(document).ready(function(){
          $("#btn2").click(function(){
              $("#div6").stop();
          });
     });
    </script>
<title></title>
</head>
<body>
<!-- 现在我要做的就是让元素有滑动的效果 -->
<!-- <div class="div1">点击我</div> -->
<!-- <div class="div2"> -->
<!-- <p style="padding-top:50px;padding-bottom:50px;">Hello world</p> -->
<!-- </div> -->
<!-- <button style="padding:0px;">点我</button> 
<div class="div3" style="background-color:red;width:200px;height:200px;position:absolute"></div><br/>
<hr/>
<p>点击我</p>
<div class="div4" style="background-color:green;height:100px;width:100px;"></div>-->
<!-- 创建一个按钮,来控制一个动画,然后我们通过控制动画
当动画在执行的过程中,然后点击另外的一个按钮动画暂停 -->
<button id="btn1">点击我执行动画</button>
<button id="btn2">点击我停止动画</button>
<div id="div5" style="background-color:red;width:100px;height:100px">点击我触发另外的一个事件</div>
<div id="div6" style="background-color:yellow;width:100px;height:200px;display:none;">Hello world</div>
</body>
</html>





举报

相关推荐

0 条评论