Question

我有一堆网格图案的div，当点击一个tile div时，我希望它向右展开以显示之前隐藏的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;
      }
    }
  }
}

Answer 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

jquery动画宽度会破坏其他元素的流动

1 个答案: