使用jQuery为div设置动画并设置限制

2019年8月4日 183次阅读

我正在尝试使用外部按钮来执行可滚动容器,而不使用插件.我有一个名为#feed的容器,它有一个固定的宽度和高度,并且隐藏了溢出.在里面,我有#feed-inner,这是560px高.有向上和向下移动#feed-inner的向上和向下箭头,但是我需要限制动画,因此#feed-inner不能移动传递0或最大高度(560px).

$('#arrow-next').click(function() {
  $('#feed-inner').animate({
    top: '-=70'
  }, 500, function() {
  });
});
$('#arrow-prev').click(function() {
  $('#feed-inner').animate({
    top: '+=70'
  }, 500, function() {
  });
});

最佳答案 您可以使用
$.position获得#feed-inner相对于#feed的当前位置的值.然后您可以检查位置是0还是最大高度560px.代码看起来像这样：

$('#arrow-next').click(function() {
  $('#feed-inner').animate({
    top: parseInt($('#feed-inner').position().top) == 0 ? '0' : '-=70'
  }, 500, function() {
  });
});
$('#arrow-prev').click(function() {
  $('#feed-inner').animate({
    top: parseInt($('#feed-inner').position().top) == 560 ? '560' : '+=70'
  }, 500, function() {
  });
});

请注意,#arrow-next将使#feed-inner向上(使其看起来像内容向下滚动),这似乎与标签“next”相反,反之亦然#arrow-prev.

另外需要注意的是,当#feed-inner的位置达到560px时,会有一个空白画布,因为元素已完全移动到底部,您将看到的是一个空的#feed容器.为避免这种情况,您需要计算#feed容器的高度,并确保#feed-inner不会移动传递560 – $(#feed).outerHeight();

点赞