Question

尝试让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>

Answer 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

Answer 2

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

我的建议是：

＆＃13;

#container {
  width: 100%;
  height: 200px;
  border: solid 2px black;
}

#book {
  position: relative;
  left: 0px;
  background-color: black;
  width: 100px;
  height: 100px;
}

＆＃13;

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

＆＃13;

 getLoaderManager().restartLoader(SUGGESTIONS_LOADER,null,this);

＆＃13;

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

2 个答案: