title: jQuery UI Drag/Droppable animation issue
body: <p>I'm trying to use jQuery Ui for sorting some Items with Drag and Drop.</p>
  
  <p>If one element passes the dropzone, the dropzone should expand. This works good. But my problem is that the attribute of event.target.clientWidth is still 25. So the dropzone is still 25px, while the container is allready 250px. </p>
  
  <p>I dont know how to change it (i allready tried event.target.clientWidth = 250 but this doesnt work) and hoped you could maybe help me</p>
  
  <p>This is a part of my code:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;section id="plot" class="plot"&gt;
          &lt;div class="cards"&gt;
              &lt;div id="card__container" class="card__container" style="width: 1392px;"&gt;
                  &lt;div class="card__dropzone"&gt;
                      &lt;div class="card__dropzone--inner"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                      &lt;div&gt;&lt;div class="card ui-widget-content" id="card1"&gt;
                          &lt;span class="card__id"&gt;1&lt;/span&gt;
                          &lt;span class="card__text"&gt;Hektor runs away followed by police&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="card__dropzone"&gt;
                      &lt;div class="card__dropzone--inner"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;&lt;div class="card ui-widget-content" id="card2"&gt;
                      &lt;span class="card__id"&gt;2&lt;/span&gt;
                      &lt;span class="card__text"&gt;Hektor stumbles and falls&lt;/span&gt;
                  &lt;/div&gt;&lt;/div&gt;
  
                  &lt;div class="card__dropzone"&gt;
                      &lt;div class="card__dropzone--inner"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;&lt;div class="card ui-widget-content" id="card3"&gt;
                      &lt;span class="card__id"&gt;3&lt;/span&gt;
                      &lt;span class="card__text"&gt;Hektor get catched by police and trys to bluff hisself out&lt;/span&gt;
                  &lt;/div&gt;&lt;/div&gt;
  
                  &lt;div class="card__dropzone"&gt;
                      &lt;div class="card__dropzone--inner"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;&lt;div class="card ui-widget-content" id="card5"&gt;
                      &lt;span class="card__id"&gt;5&lt;/span&gt;
                      &lt;span class="card__text"&gt;Hektor did say something stupid&lt;/span&gt;
                  &lt;/div&gt;&lt;/div&gt;
  
                  &lt;div class="card__dropzone"&gt;
                      &lt;div class="card__dropzone--inner"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;&lt;div class="card ui-widget-content" id="card4"&gt;
                      &lt;span class="card__id"&gt;4&lt;/span&gt;
                      &lt;span class="card__text"&gt;Police a bit confused and believes him&lt;/span&gt;
                  &lt;/div&gt;&lt;/div&gt;
  
                  &lt;div class="card__dropzone"&gt;
                      &lt;div class="card__dropzone--inner"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;&lt;div class="card ui-widget-content" id="card6"&gt;
                      &lt;span class="card__id"&gt;6&lt;/span&gt;
                      &lt;span class="card__text"&gt;Police arrested him&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>Css: </p>
  
  <pre><code>.card {
              cursor: pointer;
          }
          .plot {
              overflow-y: hidden;
              overflow-x: visible;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              width: 100vw;
              padding-top: 25%;
          }
          .cards {
              position: relative;
              left: 0;
              right: 0;
              margin: auto;
          }
          .card__container {
              left:0;
              right: 0;
              margin: 25px auto;
              height: 100%;
              display: table;
          }
          .card {
              margin-top: 50px;
              width: 200px;
              height: 150px;
              border: 1px solid #d3d3d3;
              display: table-cell;
          }
          .card__dropzone--inner {
              width: 25px;
              height: 150px;
          }
          .card__id {
              font-size: 1.5em;
              font-weight: bold;
              display: block;
              padding: 10px;
          }
          .card__text {
              display: block;
              padding: 10px;
              font-family: sans-serif;
          }
          .card__dropzone {
              display: table-cell;
              vertical-align: top;
          }
          .card__dropzone--active {
              background: blue;
              box-shadow: 0 0 10px blue;
          }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function() {
      $(".card").draggable({   helper: "clone",
                               revert: true,
                               opacity: 0.5,
                               scroll:true,
                               scrollSensitivity: 100});
      $(".card__dropzone--inner").droppable({
          activeClass: "card__dropzone--active",
          over: function(event) {
              $(this).animate({
                  width: "250px"
              }, 200);
              event.target.clientWidth = 250;
              console.log("over");
          },
          out: function(event) {
              console.log("now?!");
              $(event.target).animate({
                  width: "25px"
              },200);
              event.target.clientWidth = 25;
              console.log("out");
          },
          drop: function(event) {
              console.log("drop");
          }
      });
  });
  </code></pre>
  
  <p>And this is my jsfiddle</p>
  
  <p><a href="http://jsfiddle.net/qthrvt8s/" rel="nofollow">http://jsfiddle.net/qthrvt8s/</a></p>