Question

I have a bunch of divs in sort of a grid pattern, and when a tile div is clicked on, i want it to expand out to the right to show a previously hidden div. however, during the animation, the surrounding tile divs are put out of position for a moment before going back to their correct position after the animation completes. I would like it to just smoothly slide out to the right. click on the top left tile to see most closely what I mean.

Here’s the JS code, but I assume there has to be some CSS tweak. see the fiddle for CSS.

$('.tile').on('click', function(){
    $(this).find('.sparkline').show();

    $(this).animate({
        width : '326px'
    },
    600, 
    function(){

    }); 
});

JSFiddle

All the Less:

.tiles{
  .tile{
    display:inline-block;
    width:auto;
    height:72px;
    margin:8px;
    background-color:#F1F1F1;
    border:1px solid gray;
    border-radius:5px;
    cursor:pointer;
    .origMetrics{
      width:154px;
      display:inline-block;
    }
    .sparkline{
      display:inline-block;
      width:154px;
      height:53px;
      float:right;
    }
    .seperator {
      margin: 0 15px 5px 15px;
      border-color:black;
    }
    .metrictitle{
      display:block;
      margin-left:auto;
      margin-right:auto;
      text-align:center;
    }
    .metricvalue {
      display:inline-block;
      text-align:left;
      width:auto;
      margin-left:10px;
      font-size:25px;
    }
    .metrictrend {
      float:right;
      margin-right:10px;
      margin-top:5px;
    }
    .positive{
      color:green;
      img{
        position:relative;
        bottom:15px;
        left:15px;
      }
    }
    .negative{
      color:red;
      img{
        display:none;
      }
    }
    .even{
      img{
        display:none;
      }
    }
  }
}

Answer 1

Try placing the showing of the sparkline div inside of the .animate() complete callback function.

The sparkline container was being shown and taking up space in the DOM prior to the animation being completed. This led to the appearance of a jump in the animation.

For an even cleaner look, you can use .fadeIn() instead of .show() on the sparkline container.

$('.tile').on('click', function () {
    $(this).animate({
        width: '326px'
    }, 600, function () {
        $(this).find('.sparkline').fadeIn();
    });
});

In addition, in IE and Firefox it appears that the display: inline-block style on the tiles was interfering with the overflow: hidden that gets applied as part of the animation. When you utilize inline-block, I would highly suggest also setting the vertical-align property accordingly. In your case, I believe vertical-align: top would be the best setting for the tiles.

.tile{
    display:inline-block;
    vertical-align: top;
    width:auto;
    height:72px;
    margin:8px;
    background-color:#F1F1F1;
    border:1px solid gray;
    border-radius:5px;
    cursor:pointer;
}

jsfiddle