Question

我希望在应用jquery中的样式后获取样式表文档中定义的默认样式。经过大量的尝试后，我发现解决方法是我们可以删除jquery中应用的样式，并通过.attr('style', ' ')方法获取样式表中应用的默认样式，但我现在不知道如何为此设置动画？对我来说几乎不可能。那么，有没有办法通过jquery only解决方案呢？

demo

$('#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

DEMO

Answer 2

尝试这一点，当top为0时将前一个值保存到变量中：

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); 
});

如何在应用jquery样式后获取样式表样式？

2 个答案: