can jquery toggle the original css(style.css) value and the new value(set in the .animate{})?

Question

erm...can jquery toggle the original css(style.css) value and the new value(set in the .animation{})?

$(function() {
    $('a.maximize').click(function() {
        $($(this).attr('href')).animate({
        position: "absolute",
        top: 0,
        left: 0,
        height: '99.5%',
        width: '99.5%',
        opacity: 1,
  },1000)
});
});

this is the jquery code i have now,but how to toggle the a href target to the new value(code above)

or set the .animate{} change after click,and change back the previous .animate{} after click again.

example: the same button, but first time click, change it to width height 100%,

but the second time click on the same button, change them back to the width height 50%

the third time change to width height 100% and so on..

Answer 1

Yes, you can do that with .toggle()

like this:

$('selector').toggle(func1,func2/*,func3, so on..*/)

then define your functions

function func1(){
   // do something...
}
function func2(){
   // do something...
}

the functions inside the toggle are executed from first function to last then back to start.

or you can also

$('selector').toggle(function(){...},function(){...}/*,function(){...}, so on..*/)

scroll down to the bottom of the demo here to see what I mean.

I made also a quick demo here.

Answer 2

    $('a.maximize').toggle(
      function () {
        $($(this).attr('href')).animate({
        position: "absolute",
        top: 0,
        left: 0,
        height: '99.5%',
        width: '99.5%',
        opacity: 0.8,
        });
      },
      function () {
        $($(this).attr('href')).animate({
        position: "absolute",
        top: 0,
        left: 0,
        height: '50%',
        width: '50%',
        opacity: 1.0,
        });
    );
});

erm...can help me to check any wrong with this????