以下函数采用options
参数,并根据amount
将元素设置为特定startValue
像素的动画:
options: {
property: 'right',
startValue: '-250px',
amount: '250px'
},
function (options) {
const $el = $(this.el)
$el.click(() => {
const startValue = $el.parent().css(slide.property)
const calcValue = parseInt(startValue, 10) + parseInt(slide.amount, 10)
if (startValue === slide.startValue) {
$el.parent().animate({ [slide.property]: calcValue }, 200)
} else {
$el.parent().animate({ [slide.property]: slide.startValue }, 200)
}
})
}
但是我想知道,是否有可能在不必向函数提供startValue
的情况下完成相同的操作? (例如,如果right
的初始值为0
,则在您第二次单击该元素时将其恢复为0
。)
答案 0 :(得分:1)
您可以利用.animate()
在调用时添加内联样式属性的事实。因此,如果要将元素还原回CSS中指定的right
值,可以调用.removeAttr("style")
。要获得动画效果,您必须在CSS中包含过渡属性。
例如,看看这个工作小提琴:https://jsfiddle.net/hr0cxax2/1/
$("#slideButton").on("click", function() {
$("div").animate({right:"-=50px"}, 200);
});
$("#restoreButton").on("click", function() {
$("div").removeAttr("style");
});
div {
height: 50px;
width: 50px;
top: 20px;
right: 300px;
background-color: red;
position: fixed;
-webkit-transition: right 0.2s;
-moz-transition: right 0.2s;
transition: right 0.2s;
}
否则,据我所知,您需要在调用right
之前获取并保存原始.animate()
值。