"marginTop"をjQueryでインクリメンタルにアニメーションしようとしていますが、毎回リセットされます。どうして？

Question

「スクロールテキストを追加」機能の実装に問題があります。 CSS

#outer-frame { 
height:200px; 
overflow:hidden; 
} 

とjQueryで

<a href="#" id="scroll-trigger">More</a> 

<div id="outer-frame"> 
<div id="scroll-frame"> 

.. long text 

</div> 
</div> 

..基本構成をだ

$(document).on("click","#scroll-control",function(e){ 
    (e)preventDefault(); 
    $('.scroll-frame').animate({"marginTop":"-=50px"},1000);  
}); 

。それ以上のことはありますが、私がこれまでに取り除いても、私が期待するようにはうまくいきません。

私は、ユーザーがテキストを50px単位でスクロールできるようにしたいと考えています。

＃スクロールトリガをクリックするたびに、.scroll-frameは "リセット"して0から-50pxまでスクロールします。

私は、動的CSSにどちらか動作しませんでしたたび

$(document).on("click","#scroll-control",function(e){ 
    (e)preventDefault(); 
    var newMarginTop = ($('.scroll-frame').css('marginTop')); // should get the new value? 
    newMarginTop -= 50; 
    $('.scroll-frame').animate({"marginTop": newMarginTop },1000);  
}); 

をつかんで試してみました。それはまだゼロからリセットし、スクロールします。私は何を得ていないのですか？私はjQueryのマニュアルとこれを探しています。..

$("#left").click(function(){ 
    $(".block").animate({"left": "-=50px"}, "slow"); 
}); 

...左に徐々に、より多くのボックスを移動します。なぜ私の状況は違うのですか？

Answer 1

あなたが$('.scroll-frame').css('marginTop')を取得しようとすると、それは

newMarginTop -= 50; 

文字列が

「

var newMarginTop = parseInt($('.scroll-frame').css('marginTop').replace('px',''); 

を試してみて、$（の戻り値をかどうかを確認する動作しません。スクロールフレームです'）.css（' marginTop '）はpxまたは何らかの基準を返していません。それは

Answer 2

1. を起こればあなたのanimate()プロパティは、あなたがいる場合には、これらの

   から=記号を削除

   • animate({"marginTop":"-=50px"}
   • animate({"left": "-=50px"}

   無効ですstring.replaceを使用しますしようとする新しい値を50ピクセル以下に設定すると、このようなことを試すことができます。 `;

   animate({"marginTOp" : $(this).css("marginTop")-50 }); 
   

2. あなたはe.preventDefault();