5回答

• 

  狂飙的蜗牛_1

  2016-01-01 13:41:55

  这个做的时候主要的麻烦应该就是作用域的问题，刚刚做了下，按照你的描述应该是要这种效果吧

  <!--动画操作对象-->
  <div style="width: 100px;" id="header">
      <p>这里的内容一出之后就隐藏了</p>
  </div>
  <input id="btn" type="button" value="变换"/><!--动画触发按钮-->

  <style>
      /*做一些必要的样式*/
      #header {
          height: 100px;
          overflow: hidden;
          border: 1px solid #f00;
      }
      #header p{
          width: 100px;
      }
  </style>

  //变量初始化
  var btn = document.getElementById('btn');
  var navmenu = document.getElementById("header");
  var wid = navmenu.style.width;
  var timer;
  var speed = 0;
  wid = parseInt(wid);
  
  //按钮点击触发事件：
  btn.onclick = function () {
      //判断点击之前宽度为100时：
      if (wid >= 100) {
          speed = -5;
          timer = setInterval(animation, 50);//以speed=-5执行动画函数
      }
      //判断点击之前的宽度为30时
      if (wid <= 30) {
          speed = 5;
          timer = setInterval(animation, 50);//以speed=5执行动画函数
      }
  };
  //动画函数：
  function animation() {
      wid = wid + speed;
      navmenu.style.width = wid + 'px';
      //宽度增加或减少到一定程度时清除定时器，使宽度不再变化
      if (wid >= 100 || wid <= 30) {
          clearInterval(timer);
      }
  }

  
  

  0 0
• 

  吴思超0

  2015-12-31 23:43:47

  正是我需要的实现方法,我用JS写给你看看

          var navmenu = document.getElementById("header-sidebar");

          timer = null;

          if(navmenu.style.width=="")

          {

              for(width=0;width>50;width--)

              timer = setInterval(function() {

                  navmenu.style.width= width + 'px';   

               }, 50);  

          }else{

              for(width=50;width<160;width++)

              timer = setInterval(function() {

                  navmenu.style.width= width + 'px';   

               }, 50); 

          }

  
  

  0 0
• 

  狂飙的蜗牛_1

  2015-12-31 22:51:34

  貌似你上面的代码就是想这样做的？

  0 0
• 

  狂飙的蜗牛_1

  2015-12-31 22:50:34

  如果用js写的话，你试试设定一个定时器，给一个时间，让侧边栏的宽度每次（增加 1px），到一定宽度的时候清除定时器；
  同样的方法，再次点击时，侧边栏宽度每次（减少 1px）；
  设置侧边栏溢出隐藏就行了；
  
  
  可以试试

  
  

  1 0

  吴思超0

  看看下面的新评论

  2015-12-31 23:44:34

  共 1 条回复 >

• 

  狂飙的蜗牛_1

  2015-12-31 21:02:24

  你直接把它的源码抄过来就好了啊

  

  2 0

  吴思超0 回复吴思超0

  想实现渐变变长的运动效果！

  2015-12-31 21:21:45

  共 2 条回复 >