JQUERY: Div innerhalb eines DIVs hin und her bewegen

Der Versuch, ein DIV innerhalb eines Containers DIV vor und zurück zu bewegen. Im Moment rutscht es weiter nach rechts statt zurückzusetzen und nach links zurückzugehen.JQUERY: Div innerhalb eines DIVs hin und her bewegen

Idealerweise sollte er auf die enthaltene DIV-Box einstellbar sein. Code unten:

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

 
\t setInterval(function(){ 
 

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

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

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

Quelle

2016-03-24 Jeeves

eine Behelfslösung gefunden, die gut funktioniert. Verlassen Frage, weil scheint wie eine gemeinsame genug Wunsch zu tun. Hinweis: dies könnte unhandlich erweisen, wenn versucht für mehrere Objekte so zu skalieren, wenn jemand eine bessere Lösung hat, mit allen Mitteln :)

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

Quelle

2016-03-24 19:03:59 Jeeves

Sie brauchen nicht die setInterval, weil Sie die belebte Funktion verwenden. Eine solche Funktion hat bereits einen Zeitwert.

Mein Vorschlag ist:

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>

Quelle

2016-03-24 20:43:59 gaetanoM

JQUERY: Div innerhalb eines DIVs hin und her bewegen

Antwort

Verwandte Themen