使用jQuery相对于元素的位置滑动元素

Slide elements relative to their position with jQuery

本文关键字：元素 位置 相对于 使用 jQuery      更新时间：2023-09-26

以下函数使用options参数来（切换）用jQuery滑动元素：

// options
slideRight: {
  direction: 'right',
  startValue: '0',
  endValue: '100px'
},
// function
function(slide) {
  const $el = $(this.el)
  $el.click(() => {
    if ($el.parent().css(slide.direction) === slide.startValue) {
      $el.parent().animate({
        [slide.direction]: slide.endValue
      }, 200)
    } else {
      $el.parent().animate({
        [slide.direction]: slide.startValue
      }, 200)
    }
  })
}

我想添加第四个选项mirror，它将使另一个元素反映运动。

但为此，我需要将元素相对于其当前位置进行移动。我怎样才能做到这一点？

（注意：元素的position设置为fixed。）

我的答案与迄今为止发布的答案有点不同，但应该是您想要的起点。我使用transform进行相对定位，因为如果您已经使用top left定位了一个元素，transform: translate将相对其固定的当前位置移动您的项目。我认为动画变换还有一个额外的性能优势。我会调查的。

基于（我相信是不正确的）假设修改了你的代码以在演示中工作：

const someObject = {    
    // function
    slide: function (slide) {
      const $el = $(slide.el)
      $el.click(() => {
        if (slide.slideRight.direction === 'right') {
            $el.parent().animate({transform: 'translateX(' + slide.slideRight.endValue + 'px)'}, {
                duration: 200,
                step: function (now, fn) {
                    fn.start = $el.hasClass('in') ? slide.slideRight.endValue : slide.slideRight.startValue;
                    fn.end = $el.hasClass('in') ? slide.slideRight.startValue : slide.slideRight.endValue;
                    $el.parent().css({transform: 'translateX(' + now + 'px)'});
                    if (now === fn.end) {
                        $el.toggleClass('in');
                    }
                }
            })
        } else {
          // other stuff
        }
      })
    }
}
someObject.slide({
    el: '.position-me',
    slideRight: {
        direction: 'right',
        startValue: 0,
        endValue: 100,
        mirror: '.position-me-parent-mirror'
    }
})

jsfiddle演示

检查这是否可行。我添加了第四个选项mirror，然后为其提供与第一个元素相同的动画。不确定句柄是否正确，因为我没有完整的标记。

// options
slideRight: {
  direction: 'right',
  startValue: '0',
  endValue: '100px',
  mirror: '#mirrorElement'
},
// function
function(slide) {
  const $el = $(this.el)
  $el.click(() => {
    if ($el.parent().css(slide.direction) === slide.startValue) {
      $el.parent().animate({
        [slide.direction]: slide.endValue
      }, 200);
      $(slide.mirror).animate({
        [slide.direction]: slide.endValue
      }, 200);
    } else {
      $el.parent().animate({
        [slide.direction]: slide.startValue
      }, 200)
      $(slide.mirror).animate({
        [slide.direction]: slide.startValue
      }, 200);
    }
  })
}

将参数传递给.animate()时，可以设置right: "-=50px"，以便将元素50px滑动到其当前right值的右侧。

这样的东西会将两个元素从当前位置移动相同的量：

function slide(startValue, endValue) {
    var change = endValue-startValue;
    $("#one").animate({right:"-="+change+"px"}, 200);
    $("#two").animate({right:"-="+change+"px"}, 200)  
}
slide(0,50)

这是一把正在工作的小提琴：https://jsfiddle.net/uLv1mz2u/

这就是你要找的吗？

相关文章：