jQuery显示和隐藏链接在div内滚动
问题描述:
我在下面的工作。但是,我相信这不是编写它的正确方法。什么是正确的方式来写在jQuery中显示或隐藏两个不同的链接滚动文本在div中?jQuery显示和隐藏链接在div内滚动
这是对以下内容完成的快速说明。
- 的 “包装” 的div包含溢出本身的文本。这隐藏着隐藏在css中的溢出。
- 后面的链接最初是隐藏的。
- 用户点击更多的DIV滚动到div的底部,更多的链接淡出和反向链接中消失。
- 用户点击回来,在div滚动文本备份,返回链接变淡出来,更多的链接消失了。
jQuery的
$(document).ready(function() {
$('#scroll-up').click(function(){
$('#div').animate({scrollTop: $('#div').offset().top}, 1500);
$("#scroll-up").fadeOut("fast");
$("#scroll-down").fadeIn("fast");
});
$('#scroll-down').click(function(){
$('#div').animate({scrollTop:0}, 1500);
$("#scroll-down").fadeOut("fast");
$("#scroll-up").fadeIn("fast");
});
});
CSS
#outer-wrap { margin-top: -50px; padding: 24px 12px 12px 24px; width: 330px; height: 450px; background: rgba(255, 255, 255, 0.5); }
#outer-wrap a { display: block; }
#outer-wrap a#scroll-down { display: none; }
#wrap { margin: 12px 0; width: 330px; height: 360px; overflow: hidden; }
HTML
<div id="outer-wrap">
<a href="javascript:void(0)" id="scroll-down">Back</a>
<div id="wrap" class="column first">
<p>Long paragraph of text.</p>
</div>
<a href="javascript:void(0)" id="scroll-up">More</a>
</div>
答
我想淡入 - 淡出链接是否正确,工作写得很好。但是我注意到你正在使用.offset()
,你应该知道这会给你元素相对于文档的位置。所以即使只是增加一个保证金顶部或将该元素放置在其他地方,也会给您不同的价值。
而不是$('#wrap').offset().top
为什么不使用$('#wrap')[0].scrollHeight
向下滚动并显示最底部的文本。然而,考虑到这一点,我也想知道如果$('#wrap')中的隐藏文本比您设置的360px高度长得多。您只需跳过一些文本行,然后进入底部?
为什么不用简单的显示更多 - 显示更少,用户阅读文本会更容易。见样品fiddle
嗨。我试过你的code.its不工作。 可以请你在jsfiddle中展示。 – 2013-02-28 00:55:34
http://jsfiddle.net/7r2Lz/5/它似乎没有在jsFiddle中按预期工作。它只能部分工作。它在我的开发环境中工作。我仍然只是想知道淡入淡出按钮是否正确写入。看起来很笨重。 – MAZUMA 2013-02-28 16:46:14