-1

グリッドパターンのようなdivがたくさんあり、タイルdivをクリックすると、それを右に展開して、以前に非表示にした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;
      }
    }
  }
}
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 に答える