为了账号安全,请及时绑定邮箱和手机立即绑定

为什么没有动画效果呢

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>jQuery动画特效</title>

        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

    </head>

    <style>

        div{

            width:50px;

            height:50px;

            background:#ddd;

            margin:30px 0;

            position:relative;

            }

    </style>

    <body>

        <input type="button" value="左移" id="left"/><br>

        <div></div>

        <input type="button" value="右移" id="right"/>

        <span></span>

    </body>

    <script>

       $(function(){

           $("#right").bind("click",function(){

           $("div").animate({

               left:"+=50px"

           },3000);

           });

           $("#left").bind("click",function(){

               $("div").animate({

                   right:"+=100px"

               },3000,function(){

                   width:"+=100px",

                   height:"+=100px"

               });

           });

       }) ;

    </script>

</html>


正在回答

1 回答

链式动画的第二个动画,你缺了animate方法。你要在31行后,加上 $("div").animate({,并且在height:"+=100px"}后面加上   })

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>jQuery动画特效</title>
       <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
   </head>
   <style>
       div{
           width:50px;
           height:50px;
           background:#ddd;
           margin:30px 0;
           position:relative;
           }
   </style>
   <body>
       <input type="button" value="左移" id="left"/><br>
       <div></div>
       <input type="button" value="右移" id="right"/>
       <span></span>
   </body>
   <script>
      $(function(){
          $("#right").bind("click",function(){
          $("div").animate({
              left:"+=50px"
          },3000);
          });
          $("#left").bind("click",function(){
              $("div").animate({
                  right:"+=100px"
              },3000,function(){
              $("div").animate({
                  width:"+=100px",
                  height:"+=100px"});
              });
          });
      }) ;
         
   </script>
</html>


0 回复 有任何疑惑可以回复我~
#1

listenlo 提问者

非常感谢!
2016-05-18 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习,有效提高前端开发速度

进入课程

为什么没有动画效果呢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信