从右到左动画div，然后再从左到右动画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

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

＆＃13;

＆＃13;

$("#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");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

优化代码：

＆＃13;

＆＃13;

// 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());
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你能尝试这样简单的事吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

希望它有所帮助。