title: get object position as specified in CSS to modify in jQuery
body: <p>First question, so please let me know if I could/should be asking this more succinctly/clearly...</p>
  
  <p>I'm working on an experimental script that vibrates objects with a given class with increasing intensity over time. I'm working with jRumble as a base. My script needs to get the initial CSS position of objects to be vibrated and then add the modifying var. I set this up like so at first:</p>
  
  <pre><code>$this.animate({
      'left': parseFloat($this.css( "left" )) + rx + 'px',
  </code></pre>
  
  <p>which works great in Chrome, but Safari and iOS return different values. This explained the problem: <a href="https://stackoverflow.com/questions/7891824/jquery-selector-csstop-returns-different-values-for-ie-firefox-and-chr/">jquery $(&#39;selector&#39;).css(&#39;top&#39;) returns different values for IE, firefox and Chrome</a>, so I switched to using .offset:</p>
  
  <pre><code>offset = $(".offreg").offset();
  </code></pre>
  
  <p>...</p>
  
  <pre><code>'left': offset.left + rx + 'px', 
  </code></pre>
  
  <p>but this is problematic because the script iterates-- .offset returns the current position each time instead of the initial one. I tried placing the var outside of the iterating section, but this (obviously) doesn't work because it is no longer associated with the "this" of the rumble script. The var is then set at the value of the first element with class .offreg.</p>
  
  <p>The page itself is here: <a href="http://sallymaier.github.io/off-register/" rel="nofollow noreferrer">http://sallymaier.github.io/off-register/</a>
  I'm going to revert to the last version that worked in Chrome. My github is public, so you can see my mess-making there I think.</p>
  
  <p>Full script as it works in Chrome below:</p>
  
  <pre><code>var offRegister = function() {
  
      if (!($ = window.jQuery)) { // see if jQuery is already called, if not, calling script
        script = document.createElement( 'script' );
        script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; 
        script.onload=runRumbler;
        document.body.appendChild(script);
      } 
      else {
        runRumbler();
      }
  
      function runRumbler() {      
          $(document).ready(function(){
  
              var count = 0;
  
              $(function addone(){
                  count = count+1;
  
                  (function($) {
                    $.fn.jrumble = function(options){  // jRumble by Jack Rugile. http://jackrugile.com/jrumble/
  
                      /*========================================================*/
                      /* Options
                      /*========================================================*/
                      var defaults = {
                        x: count/5,
                        y: count/5,
                        rotation: 0,
                        speed: 200,
                        opacity: false,
                        opacityMin: .5
                      },
                      opt = $.extend(defaults, options);  
  
                      return this.each(function(){
  
                        /*========================================================*/
                        /* Variables
                        /*========================================================*/
                        var $this = $(this),        
                          x = opt.x*2,
                          y = opt.y*2,
                          rot = opt.rotation*2,
                          speed = (opt.speed === 0) ? 1 : opt.speed,      
                          opac = opt.opacity,
                          opacm = opt.opacityMin,
                          inline,
                          interval;
  
                        /*========================================================*/
                        /* Rumble Function
                        /*========================================================*/    
                        var rumbler = function(){       
                          var rx = Math.floor(Math.random() * (x+1)) -x/2,
                              ry = Math.floor(Math.random() * (y+1)) -y/2,
                              rrot = Math.floor(Math.random() * (rot+1)) -rot/2,
                              ropac = opac ? Math.random() + opacm : 1;
  
                          /*========================================================*/
                          /* Ensure Movement From Original Position
                          /*========================================================*/        
                          rx = (rx === 0 &amp;&amp; x !== 0) ? ((Math.random() &lt; .5) ? 1 : -1) : rx;
                          ry = (ry === 0 &amp;&amp; y !== 0) ? ((Math.random() &lt; .5) ? 1 : -1) : ry;  
  
                          /*========================================================*/
                          /* Check Inline
                          /*========================================================*/
                          if($this.css('display') === 'inline'){
                            inline = true;
                            $this.css('display', 'inline-block');
                          }
  
                          /*========================================================*/
                          /* Rumble Element
                          /*========================================================*/      
                          $this.animate({
                            'left': parseFloat($this.css( "left" )) + rx + 'px', // move from declared position
                            'top': parseFloat($this.css( "top" )) + ry+'px',
                            '-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ropac*100+')',
                            'filter':'alpha(opacity='+ropac*100+')',          
                            '-moz-opacity':ropac,         
                            '-khtml-opacity':ropac,         
                            'opacity':ropac,
                            '-webkit-transform':'rotate('+rrot+'deg)', 
                            '-moz-transform':'rotate('+rrot+'deg)', 
                            '-ms-transform':'rotate('+rrot+'deg)',
                            '-o-transform':'rotate('+rrot+'deg)', 
                            'transform':'rotate('+rrot+'deg)'
                          });
  
                        }; /* close rumble function */
  
                        /*========================================================*/
                        /* Rumble CSS Reset
                        /*========================================================*/
                        var reset = {
                          'left':0,
                          'top':0,
                          '-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)',
                          'filter':'alpha(opacity=100)',          
                          '-moz-opacity':1,         
                          '-khtml-opacity':1,         
                          'opacity':1,
                          '-webkit-transform':'rotate(0deg)',
                          '-moz-transform':'rotate(0deg)',
                          '-ms-transform':'rotate(0deg)',
                          '-o-transform':'rotate(0deg)',
                          'transform':'rotate(0deg)'
                        };
  
                        /*========================================================*/
                        /* Rumble Start/Stop Trigger
                        /*========================================================*/
                          $this.bind({
                          'startRumble': function(e){
                            e.stopPropagation();
                            clearInterval(interval);
                            interval = setInterval(rumbler, speed)
                          },
                          'stopRumble': function(e){
                            e.stopPropagation();
                            clearInterval(interval);
                            if(inline){
                              $this.css('display', 'inline');
                            }
                            $this.css(reset);
                          }
                        });   
  
                      });// End return this.each
                    };// End $.fn.jrumble
  
                  })(jQuery);
  
                  /*===============================================================*/
                  /* Specify selector to vibrate below. 
                  /* For bookmarklet, 'div' will vibrate all elements, 
                  /* in plugin this can be specifically targeted to a class or id.
                  /*===============================================================*/
  
                  $('.offreg').jrumble();    
                  $('.offreg').trigger('startRumble');
  
               setTimeout(addone, 1000); // how many seconds to wait before adding to count, increasing vibration
  
              }); // end addone()
  
           });
      };
    };
  
  offRegister();
  </code></pre>