将jquery动画恢复为原始css状态

时间:2010-09-01 15:34:10

标签: javascript jquery html css jquery-ui

我有一个元素页面,根据用户的交互,每个元素都可以通过给定的函数进行动画处理:

function slideAndFade(id){
    $(id).animate({opacity: 'toggle', width: 'toggle'}, 500);
}

我想创建一个重置功能,将所有元素带回页面。通过上面的切换功能运行所有元素将不起作用,因为将显示当前隐藏的元素,并且将隐藏当前显示的元素。

基本上寻找将所有元素恢复到原始css状态的方法,无论它们是否被jquery动画操作过。

谢谢 -

修改

刚刚意识到我需要做的就是用'show'代替'toggle':

function revertSlideAndFade(id){
    $(id).animate({opacity: 'show', width: 'show'}, 500);
}

在任何元素上调用它将确保元素在这种情况下恢复为可见。但是,请参阅下面的Nick's answer了解更为普遍适用的方法。

1 个答案:

答案 0 :(得分:5)

如果你能识别出可能传递给这个函数的所有元素,比如他们有一个类.toggleElem,你可以使用它来存储页面加载的值,然后在需要时恢复,如下所示:

$(function() {
  $(".toggleElem").each(function() {
    var $this = $(this);
    $.data(this, 'css', { opacity: $this.css('opacity'), 
                          width: $this.css('width') });
  });
});

然后你可以在以后随时恢复它们:

function restore() {
  $(".toggleElem").each(function() {
    var orig = $.data(this, 'css');
    $(this).animate({opacity: orig.opacity, width: orig.width}, 500);
  });
}