应用jQuery样式后如何获取样式表样式？

Question

我想从jquery应用样式后，获取样式表文档中定义的默认样式。 经过大量的尝试，我发现解决方案是我们可以删除.jQuery中应用的样式，并通过.attr('style', ' ')方法获取样式表中应用的默认样式.attr('style', ' ')但现在我被困在那我为此动画吗？ 对我来说几乎是不可能的。 那么，有什么办法可以通过仅jquery解决方案来做到这一点？

演示

$('#one').on('click',function(){
    $('#test').animate({
        'top':'0%',
        'left': '0%',
        'width': '100%',
        'height': '20%'
    },5000); 
});
$('#two').on('click',function(){
    $('#test').attr('style',' '); // I want to animate as previous but without 
});                         // placing the values defined in stylesheet manually
                // but get the default style of stylesheet while animating.

Answer 1

您可以使用.switchClass() 。 使用所需的样式创建2个类，并使用switchClass

$('#one').on('click',function(){
    $('#test').switchClass("class1","class2",5000); 
});
$('#two').on('click',function(){
    $('#test').switchClass("class2","class1",5000);
});

注意：您需要jQuery UI

演示

Answer 2

尝试此操作，当top为0时将previus值保存到变量中：

var top, left, width, height = '';
$('#one').on('click',function(){
    if($('#test').css('top') != 0){
        top = $('#test').css('top');
        left = $('#test').css('left');
        width =  $('#test').css('width');    
        height = $('#test').css('height');
    }
    $('#test').animate({
        'top':'0%',
        'left': '0%',
        'width': '100%',
        'height': '20%'
    },5000); 
});
$('#two').on('click',function(){
  $('#test').animate({
        'top': top,
        'left': left,
        'width': width,
        'height': height
    },5000); 
});