JQUERY：Divを他のDIV内で前後に移動

DIVをコンテナDIVの範囲内で前後に移動しようとしています。今は、リセットして左に戻るのではなく、右に滑り続けます。JQUERY：Divを他のDIV内で前後に移動

理想的には、含まれるDIVボックスにリサイズ可能なバイアスを設定する必要があります。以下のコード：うまく機能回避策を見つけ

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

出典

2016-03-24 Jeeves

。質問を出すのはのように思えるので、一般的な欲望です。誰かがよりよい解決策を持っているので、もし複数のオブジェクトのを拡張しようとした場合、これはすべての手段によって、扱いにくい証明することがあります:)

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

出典

2016-03-24 19:03:59 Jeeves

あなたはアニメーション機能を使用するため、あなたがたsetIntervalは必要ありません。そのような関数はすでに時間値を持っています。

私の提案は次のとおりです。

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>

出典

2016-03-24 20:43:59 gaetanoM

JQUERY：Divを他のDIV内で前後に移動

答えて

関連する問題