jQuery изменение размера мигает

Question

Я хочу, чтобы ширина .tabla_gs_gm превышала .content, .tabla_gs_gm исчезает и появляется другой div. Это уже работает, но при изменении размера экрана между двумя разделителями. Я уверен, что это для функции изменения размера, но что я могу сделать?

JQuery:

<script>  
    function jqUpdateSize(){ 

     var content = $(".content").width();           
     var tabla_gs_gm = $(".tabla_gs_gm").width(); 

     if(tabla_gs_gm >= content){ 
      $(".grillas_mobile").css("display","block"); 
      $(".grillas_desktop").css("display","none"); 
     }else{ 
      $(".grillas_desktop").css("display","block"); 
      $(".grillas_mobile").css("display","none"); 
     } 

    }; 
    $(document).ready(jqUpdateSize); 
    $(window).resize(jqUpdateSize); 
</script> 

HTML:

<div class="content"> 
     <div class="grillas_desktop"> 
      <table> 
       //content 
      </table> 
     </div> 

     <div class="grillas_mobile"> 
      <table> 
       //content 
      </table> 
     </div> 
    </div> 

CSS:

.grillas_desktop, .grillas_mobile{ 
    margin: 10px auto; 
    width: 100% !important; 
    height: auto; 
    overflow: hidden; 
    display: block; 
} 

table.tabla_gs_gm{ 
    margin: auto; 
    width: 99%; 
    border-collapse: collapse; 
} 

.tabla_gs_gm td{ 
    padding: 3px; 
} 

.tabla_gs_gm .class_label{ 
    display: block; 
    vertical-align: middle; 
    text-align: center; 
} 

.grillas_mobile select{ 
    margin: 3px 0px 10px 0px; 
    width: 100%; 
    padding: 3px 3px; 
} 

Answer 1

Я установил высоту «.tabla_gs_gm» на 0px, когда это превышает содержимое и теперь не мигает.

<script>  
    function jqUpdateSize(){ 

     var content = $(".content").width();           
     var tabla_gs_gm = $(".tabla_gs_gm").width(); 

     if(tabla_gs_gm >= content){ 
      $(".grillas_mobile").css("display","block"); 
      $(".grillas_desktop").css("height","0px"); 
     }else{ 
      $(".grillas_desktop").css("height","auto"); 
      $(".grillas_mobile").css("display","none"); 
     } 

    }; 
    $(document).ready(jqUpdateSize); 
    $(window).resize(jqUpdateSize); 
</script> 

Answer 2

За короткий период, ни объективистские t имеет класс resizing, поэтому вы видите интересные результаты. Вы можете выбрать для этого общий родитель, но я буду использовать body. Вы можете добавить класс body, что указывает на то, что в настоящее время изменения размера, а что нет, и таким образом ваши соответствующие CSS селекторы будут применяться одновременно:

<script>  
    function jqUpdateSize(){ 

     var content = $(".content").width(); 
     var tabla_gs_gm = $(".tabla_gs_gm").width(); 

     if(tabla_gs_gm > content){ 
      $('body').addClass('mobileResizing'); 
     }else{ 
      $('body').removeClass('mobileResizing'); 
     } 


    }; 
    $(document).ready(jqUpdateSize); 
    $(window).resize(jqUpdateSize); 
</script> 

Вы можете установить свой CSS до реагировать на эти события, как так:

когда tabla_gs_gm > content верно, префикс для ваших селекторов с body.mobileResizing:

body.mobileResizing .grillas_mobile { 
    /* CSS for mobile when its resizing */ 
} 
body.mobileResizing .grillas_desktop { 
    /* CSS for desktop when mobile is resizing */ 
} 

и когда tabla_gs_gm > content является ложно использование body:not(.mobileResizing):

body:not(.mobileResizing) .grillas_mobile { 
    /* CSS for mobile when desktop is resizing */ 
} 
body:not(.mobileResizing) .grillas_desktop { 
    /* CSS for desktop when its resizing */ 
} 

и вы можете вставить display: none;, чтобы скрыть или display: block;, чтобы показать, какие бы элементы, которые вы хотите, учитывая указанное выше условие.