动画 div 从右到左然后再从左到右

Question

如果单击按钮，我会尝试将 div 从其原始位置设置为屏幕左侧的动画。如果单击另一个按钮，那么我希望它动画回到它的原始位置。我能够弄清楚如何从右到左对其进行动画处理，但我无法将其动画化回原来的位置。

var left = $('#coolDiv').offset().left;

$("#b1").click(
  function() {
    $("#coolDiv").css({
      left: left
    }).animate({
      "left": "0px"
    }, "slow");
  }
);

$("#b2").click(
  function() {
    $("#coolDiv").css({
      right: right
    }).animate({
      "right": "0px"
    }, "slow");
  }
);

#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">left</button>
<button id="b2">right</button>

http://jsfiddle.net/XqqtN/5385/

Answer 1

你能试试这样简单的东西吗？

$(function () {
  $(".animateable").animate({
    left: $(window).innerWidth() - 50
  }, 1000, function () {
    $(".animateable").animate({
      left: 0
    }, 1000);
  });
});

* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
  Hi
</div>

您可以使用setInterval 使其多次工作。

$(function () {
  setInterval(function () {
    $(".animateable").animate({
      left: $(window).innerWidth() - 50
    }, 1000, function () {
      $(".animateable").animate({
        left: 0
      }, 1000);
    });
  }, 2000);
});

* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
  Hi
</div>

Answer 2

将left CSS 设置为窗口宽度减去框的宽度。

$("#b1").click(function() {
  // Get the current left of the div
  var left = $('#coolDiv').offset().left;

  $("#coolDiv").css({
    left: left
  }).animate({
    left: 0
  }, "slow");
});

$("#b2").click(function() {
  var left = $(window).width() - $('#coolDiv').width();

  $("#coolDiv").css({
    left: 0
  }).animate({
    left: left
  }, "slow");
});

#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>

---

优化代码：

// Common function to animate Div on both button clicks
function animateDiv(left, right) {
  $('#coolDiv').css({
    left: left
  }).stop(true, true).animate({
    left: right
  }, 'slow');
}

$('#b1').click(function() {
  animateDiv($('#coolDiv').offset().left, 0);
});

$('#b2').click(function() {
  animateDiv(0, $(window).width() - $('#coolDiv').width());
});

#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>

Answer 3

这是您更新后的代码。进行如下更改：

$("#b1").click(
  function() {
    $("#coolDiv").animate({
        "left": "0px"
      },
      "slow"
    );
    $("#coolDiv").css('right', '');
  }
);

$("#b2").click(
  function() {

    $("#coolDiv").animate({
        "right": "0px"
      },
      "slow"
    );
    $("#coolDiv").css('left', '');
  }
);

#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">B1</button>
<button id="b2">B2</button>

希望对你有帮助。