-1

我有一堆网格模式的 div，当单击 tile div 时，我希望它向右展开以显示以前隐藏的 div。但是，在动画过程中，周围的 tile div 会在动画完成后回到正确位置之前暂时偏离位置。我希望它能够顺利滑出到右侧。单击左上角的图块以最仔细地查看我的意思。

这是 JS 代码，但我认为必须进行一些 CSS 调整。参见 CSS 的小提琴。

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

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

    }); 
});

JSFiddle

少之又少：

.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;
      }
    }
  }
}
4

1 回答 1

1

尝试将迷你图的显示div放在.animate()完整的回调函数中。

在动画完成之前，迷你图容器正在显示并占用 DOM 中的空间。这导致动画中出现了跳跃。

要获得更清洁的外观，您可以使用.fadeIn()而不是.show()在迷你图容器上使用。

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

此外，在 IE 和 Firefox 中，display: inline-block瓷砖上的样式似乎干扰了overflow: hidden作为动画一部分应用的样式。当您使用 时inline-block，我强烈建议您也vertical-align相应地设置属性。在你的情况下，我相信vertical-align: top这将是瓷砖的最佳设置。

.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

于 2013-02-05T23:46:57.190 回答