jQuery 动画返回到 class 指定值

Question

用 jQuery 以一种方式为各种元素设置动画很简单，但是效果很好..

我确实在 CSS 中用类和 ID 指定了各种性质的原点位置，如宽度、位置、边距等。现在我必须在某个时候撤销我的所有更改，但似乎没有一个好的方法来做到这一点...

有些动画是这样的

var topList = $("#topList");
$("#topList").css({
    position: 'fixed',
    top: topList.offset().top,
    right: topList.offset().left,
}).animate({left:'-200%'}, 1000);

$("main").animate({height:'200px'}, 1000);
$("main h1").animate({'margin-top':'20px'}, 1000);

$("#submitNewInput").animate({width:'400px'}, 700);
$("#alias").css('display', 'inline').animate({width:'200px'}, 1000);

下面是一些 css 值

#topList {
    /* is just a normal with no attribute at all */
}
main {
    height: 260px;
}
h1 {
    /* no margin value */
}

我该如何逆转它们？

还有一点要记住，有些值是有线的，比如 chrome 的默认 h1 边距。我看到我可以设置和复制 css 和 jquery 中的所有值，但这意味着最终更改总是两次（IMO 有点冒险）

我不需要任何浏览器兼容性，chrome 48 就可以了

Answer 1

the below code will reverse the animation

    var topList = $("#topList");
    $("#topList").css({
     position: 'fixed',
     top: topList.offset().top,
     right: topList.offset().left,
    }).animate({left:'-200%'}, 1000,function(){
    $(this).animate({height:'200%'},1000);});

pass callback function to animaton

also check this Fiddle out

Answer 2

我可以通过将值保存为元素中的 data- 属性来实现

动画

links.attr("data-margin", links.css("marginLeft"));
links.animate({'margin-left':'0'}, 800);

chart.attr("data-margin", chart.css("marginTop"));
chart.animate({'margin-top':'0'}, 800);

反转

links.animate({'margin-left': links.attr("data-margin")}, 800);
chart.animate({'margin-top': chart.attr("data-margin")}, 800);

jQuery 动画返回到 class 指定值

jQuery animate to back to class specified values

css

jquery

jquery-animate