CODEWITHSUNDEEP
jquery
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

How to get stylesheet styles after applying jquery styles?

I wanted to get the default styles defined in the stylesheet document after applying the styles from jquery. After a lots of try I found the solution for this is that we can remove the styles applied in jquery and get the default styles applied in stylesheet by .attr('style', ' ') method but I'm stucked now that how can I animate to this? Almost impossible to me. So, is there any way to do this by jquery only solution?

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.

Upvotes: 1

Views: 47

Answers (2)

Anton
Anton

Reputation: 32581

You can use .switchClass(). Create 2 classes with the style you want and use switchClass

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

Note: You need jquery UI

DEMO

Upvotes: 3

Gaucho_9
Gaucho_9

Reputation: 265

Try this, saving the previus value into variables when top is 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); 
});

Upvotes: 1

Related Questions