jquery - CSSの左の値を要素の幅にJqueryでアニメートする方法は？

Question

Jquery animate関数を使用して、親を基準にして絶対divを移動する必要があります。CSSオブジェクトリテラルの左+=-600pxを制限して、幅の終わりに達したときに左の位置が停止するようにするにはどうすればよいですか？つまり、要素がページから外れたり見えなくなったりしないように、要素の左側の位置を制限したいと思います。助けてくれてありがとう

Answer 1

$(this).animate({'left': '-'+$(this).parent().width()}, [time in ms]);

または、要素自体の幅を意味する場合:

$(this).animate({'left': '-'+$(this).width()}, [time in ms]);

Answer 2

親内で整列させるには、次のように、親の幅から子の幅を差し引く必要があります。

$(document).ready(function(){
var childWidth = $('#child').width();
var parWidth = $('#child').parents('#parent').width();
var offSet = parWidth - childWidth;

$('#child').animate({
    left: '+=' + offSet  
}, 1000);

});

HTML の例:

<div id="parent">
    <div id="child">
      I've been a bad child.  
    </div>    
</div>

CSS:

* {
  margin: 0;
  padding: 0;
}
#parent {
  width: 600px;
  height: 200px;
  background: green;  
  position: relative;  
}

#child {
  position: absolute;
  background: red;
  width: 100px;
  height: 200px;        
}

デモンストレーションについては、この JSFiddleを参照してください。

Answer 3

jQueryanimateのstep-function を使用して、各ステップで、要素がページの端に到達して停止する必要があるかどうかを確認できます。HEREは、ステップ関数を使用して制限に達したときにアニメーションを停止する方法を示すフィドルです。

 ...animate({left: '+=-600px'},
   {
     ... ,
     step: function(now, fx) {
       if (fx.now <= 0) { // If the current animation value is less than zero
         $(fx.elem).stop();
         $(fx.elem).style('left', '0');
       }
     }
     ...
   }   
 ); 

step 関数を使用すると、必要に応じてアニメーションを段階的に制御できます。詳細については、こちらをお読みください。

Answer 4

あなたはコードを提供していないので、私の唯一の推測は、あなたが jQuery の animate 関数の仕組みを誤解していることです。実際、jQuery の animate 関数はまさにあなたが望んでいることを行います。必要な要素の属性を必要以上に増加させません。つまり、必要な場合を除き、ページから移動してビューから外し続けることはありません。ここでそれがどのように機能するかを読んでください。