Why does an element start its css3 transition/transform from the top left of the window?

This is a bit annoying: i have a div which starts its transition from the top left of the window even when positioned anywhere else on the document. I've tried usign -webkit-transform-origin with no success, maybe i've used it wrong. Could anybody help me? :) Here's the code... all of it, but i've commented on the relevant parts - which are at the bottom, mainly.

Here's a live version of the code.

<style>
    #pool{
        width:100%;

    }
    .clickable{
      <!-- class of the element being transitioned -->
        display:inline;
        margin-right: 5px;
        -webkit-transition: all 500ms ease;
        position: absolute;
    }

    .profile_image{
        border: solid 1px black;
        -webkit-transition: all 500ms 开发者_高级运维ease;
        position:relative;
    }
</style>
<section id="pool"></section>
<script>
    var Cache = {};
    Cache.hasItem = function(item_key){
        if(!localStorage.getItem(item_key)){
            return false;
        }else{
            return true;
        }
    }   
    Cache.storeItem = function(key, value){
        localStorage.setItem(key, value);
    }
    Cache.fetch = function(key){
        return jQuery.parseJSON(localStorage.getItem(key));
    }
    Cache.clear = function(key){
        localStorage.removeItem(key);
    }

    var Twitter = {};
    Twitter.url = "http://api.twitter.com/1/statuses/public_timeline.json?callback=?";
    Twitter.getFeed = function(){
        console.log("Fetching...");
        $.getJSON(Twitter.url, function(json){
            Cache.storeItem('feed',JSON.stringify(json));
        })
        .complete(function(){
               //to be implemented
            console.log("Completed");
        })
    }



        if(!Cache.hasItem('feed')){
            Twitter.getFeed();
        }

        var feed = Cache.fetch('feed');
        for(var i in feed){
            var entry = feed[i];
            var element = '<div id="'+i+'" class="clickable"><img class="profile_image" src="'+entry.user.profile_image_url+'"/></div>';
            $("#pool").append(element);
        }
</script>





<script>
    $(".profile_image").click(function(e){
        var target = $(e.target);
        var parent = target.parent();

        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var newWidth = 500;
        var newHeight  = 100;
        var newX = (windowWidth-newWidth)/2;
        var newY = (windowHeight-newHeight)/3;

            /************HERE'S THE PROBLEM*******/
        parent.css('background-color','red');
        parent.css('display','inline');
        parent.css('position','fixed'); // tried absolute and inherit as well
        parent.css('z-index','3');
        parent.width(newWidth).height(newHeight).offset({top:newY, left:newX});


    })
</script>

Results: With help from jfriend00 i managed to fix it. Here's the code:

<style>
    #pool{
        width:100%;
        display: inline;

    }
    .clickable{
        display: inline-block;
        margin-right: 5px;
        position: scroll;

    }

    .profile_image{
        border: solid 1px black;


    }
</style>

And the Javascript:

<script>
    $(".profile_image").click(function(e){
        var target = $(e.target);
        var parent = target.parent();

        targetOffset = target.offset();
        parentOffset = parent.offset();


        target.css('top',targetOffset.top-5);
        target.css('left',targetOffset.left-5);
        parent.css('top',parentOffset.top);
        parent.css('left',parentOffset.left);

        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var newWidth = 500;
        var newHeight  = 100;
        var newX = (windowWidth-newWidth)/2;
        var newY = (windowHeight-newHeight)/3;

        parent.css('-webkit-transition', 'all 500ms ease');
        parent.css('background-color','red');
        parent.css('position','absolute');
        parent.css('z-index','3');
        parent.width(newWidth).height(newHeight).offset({top:newY, left:newX});


    })
</script>

It looks to me like you change the object's position from relative to fixed upon the click (along with a few other style changes). When you change it to fixed, the object is no longer positioned in the flow of the page and it goes to it's left and top position on the page which it does not look like you've initialized - thus they are set to (0,0) so that's where the object jumps to when you change it's position to fixed (top/left of the page).

If you want them to transition from where they were, you will have to calculate their original position on the page and set top and left to those values in the same code where you set the position to fixed.

I would assume that jQuery has a function to calculate the object's absolute position in the page for you so you can use that (YUI has such a function so I assume jQuery probably does too). Since you're using "fixed", you may have to correct that for scroll position or use "absolute" instead of "fixed". One challenge here is you need to change the position and top/left without them being subject to a CSS transition because you want those attributes to change immediately. Then, you enable the transitions and set the final position.