是否可以将元素恢复到之前的位置而不将位置作为参数传递?

时间:2016-04-15 03:13:02

标签: javascript

以下函数采用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。)

1 个答案:

答案 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()值。