Question

我无法实现“滚动更多文字”功能。

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

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

.. long text

</div>
</div>

..在css中

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

和Jquery ..

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

这是基本结构。还有更多，但即使我已经剥离了它，它也不会像我期望的那样工作。

我只是希望用户能够以50px的增量向上滚动文本。

但每次单击#roll-trigger时，.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','');

并检查$（'。scroll-frame'）。css（'marginTop'）的返回值是否未返回px或某个度量。如果发生则使用string.replace

Answer 2

您的animate()媒体资源无效
- animate({"marginTop":"-=50px"}
- animate({"left": "-=50px"}
从这些
中删除=符号
如果您尝试将新值设置为50px，可以尝试这样的事情。
```
animate({"marginTOp" : $(this).css("marginTop")-50 });
```
您正在以错误的方式使用事件对象
```
(e)preventDefault();
```
将其更改为e.preventDefault();

尝试使用jQuery逐步动画“marginTop”，但每次都会重置。为什么？

2 个答案: