Корректировка анимации в Google Chrome

356

23 декабря 2016, 15:12

Задача перед мной стояла такая, скрыть 3 первых столбца в таблице, в итоге скрыл. Но отображение в Chrome странное, как только открываю страницу с таблицей примерно на 1 секунды появляются первые 3 столбца которые я скрыл, и как только 1 секунда проходит столбцы скрываются. Попробовал открыть в Мозиле там идеально работает, то есть открыл таблицу первых 3 столбцов не видно. Встречаюсь с таким впервые, как можно решить проблему ?

$(document).ready(function(){   
            $('#table td:nth-child(1)').css("display", "none");
            $('#table td:nth-child(2)').css("display", "none");
            ('#$table td:nth-child(3)').css("display", "none");
             });

Answer 1

Способ №1:

#table td:nth-child(1), #table td:nth-child(2), #table td:nth-child(3) {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table"> 
  <tbody> 
    <tr><td>1</td><td>2</td><td>3</td></tr> 
  </tbody> 
</table>

Способ №2:

$(function() { 
  $('#table td:nth-child(1)').css("display", "none"); 
  $('#table td:nth-child(2)').css("display", "none"); 
  $('#table td:nth-child(3)').css("display", "none"); 
  $('body').css("display", "block"); 
});

body {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table"> 
  <tbody> 
    <tr><td>1</td><td>2</td><td>3</td></tr> 
  </tbody> 
</table>

Answer 2

Так пока $(document).ready не сработал (т.е. не загрузился весь контент и файлы скриптов и стилей), его функция не скрывает эти столбцы. Перенесите display:none в css и он отработает быстрее и мигания не будет.