Question

I have several divs with the class “itemWerk”. I wish to toggle them, so that i can enlarge them and set them back to the original size and position.

I’ve come quite far as you can see over here. It’s just the positioning in my second function i can’t get to work. I’m not really sure what i should use: .position or .offSet or .data… Seen several guides that sort of explain what i’m looking for but can’t get it to work.

Here is my jQuery code:

$('.itemWerk').toggle(

function(){

    $(this)
        .animate({'z-index':'10'}, { duration: 0, queue: false })
        .animate({'left':'0.5em'}, { duration: 400, queue: false })
        .animate({'top':'0.5em'}, { duration: 400, queue: false })
        .animate({'width':'74em'}, { duration: 400, queue: false })
        .animate({'height': '53em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'54em'},{ duration: 400, queue: false }) 
;},

function(){

    $(this)
        .animate({'left':'postion.left'}, { duration: 400, queue: false })
        .animate({'top':'position.top'}, { duration: 400, queue: false })
        .animate({'width':'10em'}, { duration: 400, queue: false })
        .animate({'height': '16em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'38em'},{ duration: 400, queue: false }) 
});

Here is one of the divs in the HTML document:

<div class="itemWerk" id="werkEen">



</div>

And here is the CSS code for the class .itemWerk

.itemWerk {
width: 10em;
height: 16em;
background: white;
float: left;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}

and the ID #werkEen

#werkEen {
position: absolute;
top: 2em;
left: 2em;
}

Answer 1

The animate() uses style attribute. So you can do this:

$('.itemWerk').removeAttr('style');

Yeah, I was about to say those from the comments.

Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

An example with CSS Class Animation using jQuery, without using inline styles.

---

If you wanna just rely on jQuery and .animate() method, you can use .data() to have the previous values stored.

$('.itemWerk').toggle(

function(){

    $.data(this, 'top', $(this).css('top'));
    $.data(this, 'left', $(this).css('left'));
    /* if you need to store others, yeah, go ahead **/

    $(this)
        .animate({'z-index':'10'}, { duration: 0, queue: false })
        .animate({'left':'0.5em'}, { duration: 400, queue: false })
        .animate({'top':'0.5em'}, { duration: 400, queue: false })
        .animate({'width':'74em'}, { duration: 400, queue: false })
        .animate({'height': '53em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'54em'},{ duration: 400, queue: false }) 
;},

function(){

    $(this)
        // use the $.data this way: //
        .animate({'left':$.data(this, 'left')}, { duration: 400, queue: false })
        .animate({'top':$.data(this, 'top'}, { duration: 400, queue: false })
        .animate({'width':'10em'}, { duration: 400, queue: false })
        .animate({'height': '16em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'38em'},{ duration: 400, queue: false }) 
});

Working Fiddle: http://jsfiddle.net/praveenscience/K2PL3/