javascript - jQuery动画和CSS左右 | jQuery动画和CSS左右

下面的代码在第一次单击（将左边框移动到中间）时工作正常，但是在第二次单击上却没有效果，我无法确定原因。我知道我可以使用其他解决方案，但是我想知道为什么正确的50％无法正常工作。这是代码：

$(document).ready(function(){

	$( "button" ).click(function(){

		   screenWidth = $("html").width() /2;
	     positionLeft = Math.round($(".container").offset().left)

		if ( positionLeft < screenWidth) {
	    $(".container").animate({
			left: "50%"
			}, 1000);
		} else if (positionLeft == screenWidth) {
			$(".container").animate({
			right: "50%"
			}, 1000);
		}
	});

});

.container{
		background-color:black;
		height: 50%;
		width: 20%;
		position: absolute;
		top: 30%;
	}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>debugging</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>
  <div class="container"></div>
  <button>click</button>
</body>


<script>


</script>
</html>

最佳答案

由于您已经朝一个方向行走，因此必须转身...

如果要定位元素，则只能声明与“相同侧”（左上/右下）的偏移量。只需使用auto值重置相反的值即可。

$(document).ready(function(){

  $( "button" ).click(function(){
    screenWidth = $("html").width() /2;
    positionLeft = Math.round($(".container").offset().left)

    if ( positionLeft < screenWidth) {
      $(".container").css('right', 'auto');
      $(".container").animate({
        left: "50%"
      }, 1000);
    } else if (positionLeft == screenWidth) {
      $(".container").css('left', 'auto');
      $(".container").animate({
        right: "50%"
      }, 1000);
    }
  });

});

.container {
  background-color:black;
  height: 50%;
  width: 20%;
  position: absolute;
  top: 30%;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>debugging</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>
  <div class="container"></div>
  <button>click</button>
</body>


<script>


</script>
</html>

关于javascript - jQuery动画和CSS左右，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28645164/