以下函数使用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/
这就是你要找的吗?