javascript - 使用 jQuery 相对于其位置滑动元素

Question

以下函数采用 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，它将使另一个元素镜像运动。

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

(注意:元素的位置设置为固定。)

Answer 1

我的答案与迄今为止发布的答案略有不同，但应该可以作为您想要的答案的起点。我使用 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 demo