如何为 UL 中的特定 LI 创建动画？
我正在使用 Jquery .animate 上下滚动 UL，以便您可以看到所有元素，我将如何制作 IF ELSE 语句。
IFUL中的FIRST LI项位于顶部，不再滚动，IF最后一项位于屏幕可见部分的底部，不要再向下滚动，否则滚动 510 px。
现在我的代码如下所示：
$('#down').click(function() {
$(".project_thumbs").stop().animate({"top": "-=510px"});
});
$('#up').click(function() {
if (".project_thumbs" (top = 0)){
$(".project_thumbs").stop().animate({top:0});
}
else{
$(".project_thumbs").stop().animate({"top": "+=510px"});
}
I am using Jquery .animate to scroll a UL up and down so that you can see all the elements, how would i make IF ELSE statement that said.
IF the FIRST LI item in the UL is at the top, dont scroll anymore, and IF the last item is at the bottom of the visible portion of the screen dont scroll any more down, else scroll 510 px.
Right now my code looks like this:
$('#down').click(function() {
$(".project_thumbs").stop().animate({"top": "-=510px"});
});
$('#up').click(function() {
if (".project_thumbs" (top = 0)){
$(".project_thumbs").stop().animate({top:0});
}
else{
$(".project_thumbs").stop().animate({"top": "+=510px"});
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Remy Sharp 为 jquery 编写了一个插件，用于处理滚动以及元素在视口中是否可见，您可以在这里找到它： http://remysharp.com/2009/01/26/element-in-view-event-plugin/
如果您还查看该页面上的第一条评论有代码向 jquery 添加一个选择器，用于检查某个元素在视口中是否可见（这可能比整个插件对您更有用），这样您就可以检查底部 LI 是否UL（您可以使用 :last 选择器获取）位于视口中，那么您就知道是否需要向下滚动。
希望这就是您正在寻找的！
Remy Sharp wrote a plugin for jquery that deals with scrolling and whether or not an element is visible in the viewport or not, you can find it here: http://remysharp.com/2009/01/26/element-in-view-event-plugin/
If you also look at the first comment on that page there is code that adds a selector to jquery for checking whether an element is visible in the viewport (which would probably be of more use to you than the entire plugin), this way you can check whether the bottom LI in your UL (which you could grab by using the :last selector) is in the viewport, then you'd know whether you need to scroll down or not.
Hopefully that's what you were looking for!
你可以使用面具来实现这一点。将 ul （位置：绝对）包含在 div 内（位置：相对，溢出：隐藏，高度：任何你需要的）。然后，在触发运动时进行一些数学计算，以确定是否/何时根据 ul 的高度移动。 （无需担心 li 本身，因为您可以使用 ul 的块来处理定位。）
我在这里设置了一个示例： http://jsfiddle.net/4nqng/
基本上，这会检查 ul 的位置是否能够根据其相对于遮罩的当前位置以及要求移动的方向进行移动。
U can use a mask to accomplish this. Enclose the ul (position:absolute) inside a div (position:relative, overflow:hidden, height: whatever you need). Then, do some math when you trigger the motion to determine if/when to move based on the height of the ul. (No need to worry about the li's themselves as you can use the ul's block to take care of positioning.)
I set up an example here: http://jsfiddle.net/4nqng/
Basically, this checks to see if the ul's position is able to move based on it's current position relative to the mask and the direction it's being asked to move.