Невозможно изменить размер дочерних элементов?

Итак, у меня есть это меню, которое меняет высоту при прокрутке, теперь это работает отлично. Единственное, теперь я пытаюсь оживить размер шрифта, чтобы шрифт стал меньше.Невозможно изменить размер дочерних элементов?

Я провел некоторое исследование по дочерним селекторам в jQuery ($('parent > child')), но когда я применил это в своем сценарии, это не сработало. У кого-нибудь есть решение?

[HTML]

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
     <link rel="stylesheet" type="text/css" href="css/header.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    </head> 

    <body> 
     <div id="content_parent"> 
      <!-- Header --> 
      <div id="header_parent"> 
       <table class="menuItems"> 
        <td>Button</td> 
        <td>Button</td> 
        <td>Button</td> 
        <td>Button</td> 
        <td>Button</td> 
       </table> 
      </div> 

      <!-- Body (homepage) --> 
      <div id="body_parent"> 
       <h1>content-test</h1> 
      </div> 
     </div> 

     <!-- Footer --> 
     <div id="footer_parent"> 

     </div> 

     <script src="js/animateheader.js"></script> 
    </body> 
</html>

[CSS]

#content_parent { 
    max-width:1250px; 
    min-width:750px; 
    min-height:100%; 
    box-shadow:0 0 10px 2px rgb(180,180,180); 
    -webkit-box-shadow:0 0 10px 2px rgb(180,180,180); 
    -moz-box-shadow:0 0 10px 2px rgb(180,180,180); 
} 

#header_parent { 
    position:fixed; 
    right:0; 
    left:0; 
    margin-left:auto; 
    margin-right:auto; 
    max-width:1250px; 
    min-width:750px; 
    height:60px; 
    background-color:rgb(50,50,50); 
    box-shadow:-6px 0 rgba(0,0,0,0), 6px 0 rgba(0,0,0,0), 0 6px 4px -2px rgb(180,180,180); 
    -webkit-box-shadow:-6px 0 rgba(0,0,0,0), 6px 0 rgba(0,0,0,0), 0 6px 4px -2px rgb(180,180,180); 
    -moz-box-shadow:-6px 0 rgba(0,0,0,0), 6px 0 rgba(0,0,0,0), 0 6px 4px -2px rgb(180,180,180); 
    border-bottom-left-radius:2px; 
    -webkit-border-bottom-left-radius:2px; 
    -moz-border-bottom-left-radius:2px; 
    border-bottom-right-radius:2px; 
    -webkit-border-bottom-right-radius:2px; 
    -moz-border-bottom-right-radius:2px; 
    border-top-left-radius:0; 
    -webkit-border-top-left-radius:0; 
    -moz-border-top-left-radius:0; 
    border-top-right-radius:0; 
    -webkit-border-top-right-radius:0; 
    -moz-border-top-right-radius:0; 
} 

#body_parent { 
    padding-top:60px; 
    max-width:1250px; 
    min-width:750px; 
    background-color:rgb(245,245,245); 
} 

table.menuItems { 
    width:100%; 
    height:100%; 
    border-collapse:collapse; 
    border:0; 
} 

.menuItems td { 
    width:20%; 
    height:100%; 
    text-align:center; 
    color:rgb(230,230,230); 
    font-family:Sansation; 
    font-weight:bold; 
    font-size:25px; 
}

[JS]

$(window).on('scroll', function() { 
    var scrollTop = $(window).scrollTop(); 
    if (scrollTop > 0) { 
     $('#header_parent').stop().animate({height: "40px"},50); 
     $('#body_parent').stop().animate({paddingTop: "40px"},45); 
     $('table.menuItems > td').stop().animate({fontSize: "18px"},50); 
    } 
    else { 
     $('#header_parent').stop().animate({height: "60px"},50); 
     $('#body_parent').stop().animate({paddingTop: "60px"},45); 
     $('table.menuItems > td').stop().animate({fontSize: "25px"},50); 
    } 
});

Просто для оформления, строки JQuery с FONTSIZE в нем являются те, которые не функционируют как я хочу.

Вот Fiddle

источник

2015-02-25 YSbakker

, пожалуйста, не забудьте принять ответ что помогло вам, спасибо –

@DavidLaberge Да, мне пришлось ждать 5 минут, я думаю, вы отвечаете слишком быстро: D – YSbakker

Здесь обновленная версия jsfiddle: http://jsfiddle.net/52czbb73/1/

Ваш селектор был неправильно

$('table.menuItems > tbody > tr > td').stop().animate({fontSize: "18px"},50);

Я взял на себя смелость добавить tr тег в таблице.

 <div id="header_parent"> 
      <table class="menuItems"> 
       <tr> 
       <td>Button</td> 
       <td>Button</td> 
       <td>Button</td> 
       <td>Button</td> 
       <td>Button</td> 
       </tr> 
      </table> 
     </div>

Кстати, в Google Chrome вы можете получить путь CSS из инструментов разработчика, щелкнув правой кнопкой элемент, который вы хотите настроить таргетинг затем выберите CSS path, который копирует на путь CSS в буфер обмена. Затем вставьте его в свой код.

источник

2015-02-25 17:47:28

Ах спасибо Я удалил тег 'tr' некоторое время назад, но забыл об этом ... Какова цель« tbody », если я могу спросить? – YSbakker

@YSbakker 'tbody' - это элемент, который обертывает тело таблицы. Это всегда необходимо. Если вы не включите его в свою разметку HTML, браузер, как правило, добавит его для вас. –

В таблице HTML есть три возможных раздела 'thead',' tbody', 'tfooter' –

Вы используете селектор WRNG, вы можете выбрать свой td сек, как это:

$('table.menuItems td').stop().animate({fontSize: "25px"},50);

$('table.menuItems td').stop().animate({fontSize: "18px"},50);

Обновлено демо: http://jsfiddle.net/52czbb73/2/

источник

2015-02-25 17:51:01

Спасибо за ваши усилия, однако я думаю, что ответ Дэвида более определен. Но это работает так же, как и для усилий;) – YSbakker

Невозможно изменить размер дочерних элементов?

ответ

Смежные вопросы