JQuery从左到右，然后从右到右移动30个框

时间：2016-01-30 23:58:24

标签： javascript jquery

我现在正在学习Jquery，而且我仍然坚持如何从左到右，然后从右到左移动我的盒子。他们有一个延迟计，我也可以使用它来改变速度。我只是不知道我错过了什么让盒子在两个指定的方向上移动（从左到右，从右到左）。我假设它很简单，通常就是这种情况。但是，我不知道该改变什么。非常感谢任何帮助。

这是我的代码：

var easingsList = [
"swing",
"easeInQuad",
"easeOutQuad",
"easeInOutQuad",
"easeInCubic",
"easeOutCubic",
"easeInOutCubic",
"easeInQuart",
"easeOutQuart",
"easeInOutQuart",
"easeInQuint",
"easeOutQuint",
"easeInOutQuint",
"easeInSine",
"easeOutSine",
"easeInOutSine",
"easeInExpo",
"easeOutExpo",
"easeInOutExpo",
"easeInCirc",
"easeOutCirc",
"easeInOutCirc",
"easeInElastic",
"easeOutElastic",
"easeInOutElastic",
"easeInBack",
"easeOutBack",
"easeInOutBack",
"easeInBounce",
"easeOutBounce"
];

    var moveRight = function(){
      var n = 0;
      var e = easingsList[n];
      var d = parseInt($("#delay").val());
      moveBoxRight(n, e, d);

      var n = 1;
      var e = easingsList[n];
      var d = parseInt($("#delay").val());
      moveBoxRight(n, e, d);



    }

    var moveLeft = function(){
    var n = 0;
    var e = easingsList[n];
    var d = parseInt($)"#delay").val());
    moveBoxLeft (n, e, d);

    var n = 1;
      var e = easingsList[n];
      var d = parseInt($("#delay").val());
      moveBoxLeft(n, e, d);
    }

    var moveBoxRight= function(n, easing, duration)
    {
      var id = "#button" + n.toString();
      var pageWidth = $("body").width();
      var boxWidth = 150;
      $(id).animate({"margin-left":pageWidth-boxWidth + "px"}, duration, easing); 
    }

    var moveBoxLeft= function(n, easing, duration)
    {
      var id = "#button" + n.toString();
      var pageWidth = $("body").width();
      var boxWidth = 150;
      $(id).animate({"margin-left" : "0px"}, duration, easing); 
    }

    *******and heres my HTML*********

    <!doctype html>
    <html>
    <head>
    <title> jQuery animate()</title>
    <script src="jquery-1.11.3.js" type="text/javascript">
    </script>
    <script src="jquery.easing.1.3.js" type="text/javascript">
    </script>
    <script src="test.js" type="text/javascript">
    </script>
    <style>
      body
      {
        margin: 0;
      }
      .button{
       height:50px;
       width:150px;
       display: block;
       border: solid 1px black; 
       text-align: center;
       text-decoration: none;
       margin-bottom: 10px;
       line-height: 50px;
      }
    </style>
    </head>


    <body>
      <h1> jQuery Animate Easing Examples </h1>

      <input placeholder='delay; 100ms, 1s etc.'  id='delay'>
      <input placeholder='end color; rgb(0,0,0), #000000, rgba(0,0,0,1)  etc.'  id='endColor'>
      <br>
      <a href='javascript:moveLeft()' class='link'  id='button1'> Move Left </a>
      <a href='javascript:moveRight()' class='link' style='float:right'  id='button1'> Move Right </a>

      <div class='button' id='button0'> swing </div>
      <div class='button' id='button1'>easeInQuad</div>
      <div class='button' id='button2'>easOutQuad</div>
      <div class='button' id='button3'>easeInOutQuad</div>
      <div class='button' id='button4'>easeInCubic</div>
      <div class='button' id='button5'>easeOutCubic</div>
      <div class='button' id='button6'>easeInOutCubic</div>
      <div class='button' id='button7'>easeInQuart</div>
      <div class='button' id='button8'>easeOutQuart</div>
      <div class='button' id='button9'>easeInOutQuart</div>
      <div class='button' id='button10'>easInQuint</div>
      <div class='button' id='button11'>easeOutQuint</div>
      <div class='button' id='button12'>easeInOutQuint</div>
      <div class='button' id='button13'>easeInSine</div>
      <div class='button' id='button14'>easeOutSine</div>
      <div class='button' id='button15'>easeInOutSine</div>
      <div class='button' id='button16'>easeInExpo</div>
      <div class='button' id='button17'>easeOutExpo</div>
      <div class='button' id='button18'>easeInOutExpo</div>
      <div class='button' id='button19'>easeInCirc</div>
      <div class='button' id='button20'>easeOutCirc</div>
      <div class='button' id='buton21'>easeInOutCirc</div>
      <div class='button' id='button22'>easeInElasic</div>
      <div class='button' id='button23'>easeOutElastic</div>
      <div class='button' id='button24'>easeInOutElatic</div>
      <div class='button' id='button25'>easeInBack</div>
      <div class='button' id='button26'>easeOutBack</div>
      <div class='button' id='button27'>easeInOutBack</div>
      <div class='button' id='button28'>easeInBounce</div>
      <div class='button' id='button29'>easeOutBounce</div>



      </div>

    </body>
    </html>

1 个答案:

答案 0 :(得分：0)

在我看来，你的方法可以完全改进

  • 首先，动画元素的margin属性不是左右移动的好方法。固定元素并为left和right属性设置动画效果会更好。
  • 其次，您可以通过使用按钮上的属性来确定方向而不是编写重复的代码，只需要几个不同的单词来移动左对右，就可以大大简化代码。
  • 此外，您调用变量delay但使用该变量设置动画“duration”，这会产生误导。您应该重命名duration

这是我将如何做到的：

＆＃13;
＆＃13; 
var easingsList = [
  "swing",
  "easeInQuad",
  "easeOutQuad",
  "easeInOutQuad",
  "easeInCubic",
  "easeOutCubic",
  "easeInOutCubic",
  "easeInQuart",
  "easeOutQuart",
  "easeInOutQuart",
  "easeInQuint",
  "easeOutQuint",
  "easeInOutQuint",
  "easeInSine",
  "easeOutSine",
  "easeInOutSine",
  "easeInExpo",
  "easeOutExpo",
  "easeInOutExpo",
  "easeInCirc",
  "easeOutCirc",
  "easeInOutCirc",
  "easeInElastic",
  "easeOutElastic",
  "easeInOutElastic",
  "easeInBack",
  "easeOutBack",
  "easeInOutBack",
  "easeInBounce",
  "easeOutBounce"
];


$('.move').click(function(){
  var $this=$(this); 
  var duration = parseInt($("#duration").val());
  var direction = $(this).data('direction');
  var n =0;
  moveBox($('.box').eq(n), easingsList[n], duration, direction);
  moveBox($('.box').eq(n+1), easingsList[n+1], duration, direction);
  
});

function moveBox($element, easing, duration, direction) {
  var pageWidth = $("body").width();
  var boxWidth = $element.width();
  $element.css('right','auto').css('left','auto');
  var options = {duration:duration,easing:easing};
  var properties ={};
  properties[direction]=pageWidth - boxWidth + "px";
  $element.stop().animate(properties,options);
}
＆＃13; 
body {
  margin: 0;
}

.box {
  height: 50px;
  width: 150px;
  display: block;
  border: solid 1px black;
  text-align: center;
  text-decoration: none;
  margin-bottom: 10px;
  line-height: 50px;
  position:fixed;
}
.box-holder{
  width: 100%;
  position:relative;
   height: 50px;
    margin-bottom: 10px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<h1> jQuery Animate Easing Examples </h1>

<input placeholder='duration; 100ms, 1s etc.' id='duration' value="3000">
<input placeholder='end color; rgb(0,0,0), #000000, rgba(0,0,0,1)  etc.' id='endColor'>
<br>
<a href='#' class='link move' data-direction="right" > Move Left </a>
<a href='#' class='link move' data-direction="left" style='float:right'> Move Right </a>
<div class="box-holder"><div class="box"> swing </div> </div>
<div class="box-holder"><div class="box">easeInQuad</div></div>
<div class="box-holder"><div class="box">easOutQuad</div></div>
<div class="box-holder"><div class="box">easeInOutQuad</div></div>
<div class="box-holder"><div class="box">easeInCubic</div></div>
<div class="box-holder"><div class="box">easeOutCubic</div></div>
<div class="box-holder"><div class="box">easeInOutCubic</div></div>
<div class="box-holder"><div class="box">easeInQuart</div></div>
<div class="box-holder"><div class="box">easeOutQuart</div></div>
<div class="box-holder"><div class="box">easeInOutQuart</div></div>
<div class="box-holder"><div class="box">easInQuint</div></div>
<div class="box-holder"><div class="box">easeOutQuint</div></div>
<div class="box-holder"><div class="box">easeInOutQuint</div></div>
<div class="box-holder"><div class="box">easeInSine</div></div>
<div class="box-holder"><div class="box">easeOutSine</div></div>
<div class="box-holder"><div class="box">easeInOutSine</div></div>
<div class="box-holder"><div class="box">easeInExpo</div></div>
<div class="box-holder"><div class="box">easeOutExpo</div></div>
<div class="box-holder"><div class="box">easeInOutExpo</div></div>
<div class="box-holder"><div class="box">easeInCirc</div></div>
<div class="box-holder"><div class="box">easeOutCirc</div></div>
<div class="box-holder"><div class="box">easeInOutCirc</div></div>
<div class="box-holder"><div class="box">easeInElasic</div></div>
<div class="box-holder"><div class="box">easeOutElastic</div></div>
<div class="box-holder"><div class="box">easeInOutElatic</div></div>
<div class="box-holder"><div class="box">easeInBack</div></div>
<div class="box-holder"><div class="box">easeOutBack</div></div>
<div class="box-holder"><div class="box">easeInOutBack</div></div>
<div class="box-holder"><div class="box">easeInBounce</div></div>
<div class="box-holder"><div class="box">easeOutBounce</div></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题