JQUERY：在其他 DIV 中来回移动 Div答案

【问题标题】：JQUERY : Move Div back and forth within other DIVJQUERY：在其他 DIV 中来回移动 Div
【发布时间】：2016-03-24 17:59:31
【问题描述】：

试图让 DIV 在容器 DIV 的范围内来回移动。现在它继续向右滑动，而不是重置并返回左侧。

理想情况下，它应该在包含 DIV 框的情况下调整大小。代码如下：

	var RIGHT = 1;
	var LEFT = 0;
	var bookDirection = RIGHT;
	var containerwidth = $("#container").width();
	var objectwidth = $("#book").width();
	var displacement = 150;
	var maxwidth = containerwidth - objectwidth / 2;
	var minwidth = 0 + objectwidth / 2;

	setInterval(function(){

		var currentposition = $("#book").position().left;
		$("#output").text("currentposition: " + currentposition + " > Displacement: " + displacement + " >Max width: " + maxwidth);
		$("#output").text("summed: " + (currentposition + displacement));
		$("#output2").text("max is: " + maxwidth);
		//console.log("Book direction is: " +bookDirection);
		if(currentposition + displacement <= maxwidth && bookDirection == RIGHT)
		{
			console.log('hit if');
			$("#book").animate({
				left: "+=" + displacement,	
			}, 1000, function(){
			// Animation complete.	
			});//inner function call - anim complete
			bookDirection == RIGHT
		}
		else if(currentposition + displacement >= minwidth && bookDirection == LEFT )
		{	console.log('hit else if');
			console.log('direction : ' + bookDirection + 'displacement: ' + displacement);
			bookDirection = LEFT;
			$("#book").animate({
				left: "-=" + displacement,	
			}, 1000, function(){
			// Animation complete.	
			});//inner function call - anim complete
		}
		else if(currentposition + displacement > maxwidth && bookDirection == RIGHT){
			console.log('here');
			$("#book").stop();
			bookDirection = LEFT;	
			console.log(bookDirection);
		}// end IF
	}, 0); // setinterval

body{
	color: red;
}
#container{
	width: 1000px;
	height: 200px;
	border: solid 2px black;
}
#book{
	position: relative;
	left: 10px;
	background-color: black;
	width :100px;
	height :100px;	
}

	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="day044.js"></script>
		<link rel="stylesheet" type="text/css" href="day044.css">
	</head>
	<body>
		<div id="clickme">
			Click here
		</div>
		<div id="container"></container>
		<img id="book">
		<div id="output"></div>
		<div id="output2"></div>
		<div id="output3"></div>
	</body>

【问题讨论】：

标签： jquery html jquery-animate slide

【解决方案1】：

找到了一个行之有效的解决方法。留下问题，因为看起来像一个足够普遍的愿望去做。请注意，如果尝试扩展，这可能会变得笨拙对于多个对象，所以如果有人有更好的解决方案，无论如何:)

$(document).ready(function(){
var counter = 0;
var inner = 0;
var direction = 1;

function backLeft(){
    $("#book").animate({left:"-=500",},5000,function(){

    });
}
function backRight(){

        $("#book").animate({left:"+=500",},5000,function(){
            backLeft();
        });
}
function update(){
    var currentposition = $("#book").position().left;
    console.log("counter " + counter);
    backRight();
}
setInterval(function(){

    update();
},10000);
});// document.ready

【讨论】：

【解决方案2】：

您不需要 setInterval，因为您使用了 animate 函数。这样的函数已经有时间值了。

我的建议是：

var RIGHT = 1;
var LEFT = 0;

function moveObj(containerwidth, containerLeft, objectwidth, displacement, bookDirection, howManyTimes) {
  if (howManyTimes <= 0) {
    return; // ends
  }
  var currentposition = $("#book").position().left;
  var lDisplacement = displacement;
  switch (bookDirection) {
    case RIGHT:
      if ((currentposition + objectwidth) < (containerwidth + containerLeft)) {
        if (Math.abs(containerwidth + containerLeft - currentposition - objectwidth) <= displacement) {
          lDisplacement = Math.abs(containerwidth + containerLeft - currentposition - objectwidth);
          bookDirection = LEFT;
          howManyTimes--;  // on change direction decrease..
        }
        $("#book").animate({
          left: "+=" + lDisplacement
        }, 1000, function () {
          moveObj(containerwidth, containerLeft, objectwidth, displacement, bookDirection, howManyTimes);
        });
      } else {
        bookDirection = LEFT;
        moveObj(containerwidth, containerLeft, objectwidth, displacement, bookDirection, howManyTimes);
      }
      break;
    case LEFT:
      if (currentposition   > containerLeft) {
        if (currentposition < displacement) {
          lDisplacement = currentposition - containerLeft;
          bookDirection = RIGHT;
          howManyTimes--;  // on change direction decrease..
        }
        $("#book").animate({
          left: "-=" + lDisplacement
        }, 1000, function () {
          moveObj(containerwidth, containerLeft, objectwidth, displacement, bookDirection, howManyTimes);
        });
      } else {
        bookDirection = RIGHT;
        howManyTimes--;
        moveObj(containerwidth, containerLeft, objectwidth, displacement, bookDirection, howManyTimes);
      }
      break;
  }
}

$(function () {
  $('#clickme').on('click', function (e) {
    moveObj($("#container").width(), $("#container").offset().left, $("#book").width(), 150, RIGHT, $('#hmTimes').val());
  })
});

#container {
  width: 100%;
  height: 200px;
  border: solid 2px black;
}

#book {
  position: relative;
  left: 0px;
  background-color: black;
  width: 100px;
  height: 100px;
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

How many times: <input id="hmTimes" type="number" value="2">
<button id="clickme">Click here</button>
<div id="container">
    <img id="book">

    <div id="output"></div>
    <div id="output2"></div>
    <div id="output3"></div>
</div>

【讨论】：