title: jquery css using arrays as values
body: <p>I am creating a function that I need to pass in values from an array, one of the values I need to add in is a series of values for the jquery css array</p>
  
  <p>essentially I need to do the following </p>
  
  <pre><code>myArray = new Array();
  myArray[0] = ""{'float':'left','-webkit-border-top-left-radius':'20px','-webkit-border-bottom-left-radius':'20px','-webkit-border-top-right-radius':'0px','-webkit-border-bottom-right-radius':'20px'}";"
  function(){
  $("#myDiv").click(function(){
  $(this).css(myArray[0]):
  });
  }
  </code></pre>
  
  <p>That's not the exact code as its part of a way bigger function, however the aspect I am falling down on is passing the string in the array to the .css array, I can do this if I were to only include the value in the array, however this means I need to add additional items to my array which I don't want to do </p>
  
  <p>Any help - pointers would be appreciated</p>
  
  <h2>Many thanks!</h2>
  
  <p>So for context</p>
  
  <p>okay so my array is 
  <code>var card2Pos = new Array();
      card2Pos[0]="475px";
      card2Pos[1]="80px";
      card2Pos[2]="1";
      card2Pos[3]="500px";
      card2Pos[4]="70px";
      card2Pos[5]="90px";
      card2Pos[6]="510px";
      card2Pos[7]="9";<br>
      card2Pos[8]="{'float':'left','-webkit-border-top-left-radius':'20px','-webkit-border-bottom-left-radius':'20px','-webkit-border-top-right-radius':'0px','-webkit-border-bottom-right-radius':'20px'}";
      card2Pos[9]="475px";
      card2Pos[10]="80px";
      card2Pos[11]="580px";
      card2Pos[12]="60px";
      card2Pos[13]="8";
      card2Pos[14]="right";
      card2Pos[15]="450px";
      card2Pos[16]="90px";
      card2Pos[17]="625px";
      card2Pos[18]="60px";
      card2Pos[19]="7";
      card2Pos[20]="right";
      card2Pos[21]="425px";
      card2Pos[22]="100px";
      card2Pos[23]="670px";
      card2Pos[24]="60px";
      card2Pos[25]="6";
      card2Pos[26]="right";
      card2Pos[27]="400px";
      card2Pos[28]="110px";
      card2Pos[29]="715px";
      card2Pos[30]="60px";
      card2Pos[31]="5";
      card2Pos[32]="right";
      card2Pos[33]="375px";
      card2Pos[34]="120px";
      card2Pos[35]="760px";
      card2Pos[36]="60px";
      card2Pos[37]="4";
      card2Pos[38]="right";
      card2Pos[39]="350px";
      card2Pos[40]="130px";
      card2Pos[41]="805px";
      card2Pos[42]="60px";
      card2Pos[43]="3";
      card2Pos[44]="right";
      card2Pos[45]="325px";
      card2Pos[46]="140px";
      card2Pos[47]="850px";
      card2Pos[48]="60px";
      card2Pos[49]="2";
      card2Pos[50]="right";</code>
  being passed into the following function 
  `
      function uber(arg) {
          $card1.animate({
                          height:arg[0],
                          top:arg[1]
                          },500).css({'z-index':card2Pos[2]});</p>
  
  <pre><code>    $card2.animate({
                      height:arg[3],
                      top:arg[4],
                      left:arg[5],
                      width:arg[6]
                      },500).css({'z-index':arg[7]});
      $card2Nav.css(arg[8]);
      $card3.animate({
                      height:arg[9],
                      top:arg[10],
                      left:arg[11],
                      width:arg[12]
                      },500).css({'z-index':arg[13]});
      $card3Nav.css({'float':arg[14]});
      $card4.animate({
                      height:arg[15],
                      top:arg[16],
                      left:arg[17],
                      width:arg[18]                       
                      },500).css({'z-index':arg[19]});
      $card4Nav.css({'float':arg[20]});
      $card5.animate({
                      height:arg[21],
                      top:arg[22],
                      left:arg[23],
                      width:arg[24]
                      },500).css({'z-index':arg[25]});
      $card5Nav.css({'float':arg[26]});
      $card6.animate({
                      height:arg[27],
                      top:arg[28],
                      left:arg[29],
                      width:arg[30]
                      },500).css({'z-index':arg[31]});
      $card6Nav.css({'float':arg[32]});
      $card7.animate({
                      height:arg[33],
                      top:arg[34],
                      left:arg[35],
                      width:arg[36]
                      },500).css({'z-index':arg[37]});
      $card7Nav.css({'float':arg[38]});
      $card8.animate({
                      height:arg[39],
                      top:arg[40],
                      left:arg[41],
                      width:arg[42]
                      },500).css({'z-index':arg[43]});
      $card8Nav.css({'float':arg[44]});
      $card9.animate({
                      height:arg[45],
                      top:arg[46],
                      left:arg[47],
                      width:arg[48]
                      },500).css({'z-index':arg[49]});
      $card9Nav.css({'float':arg[50]});
  }
  `
  </code></pre>