[英]Can't animate font-size of child elements?
所以我有這個菜單,它可以在您滾動時更改高度,現在效果非常好。 唯一的事情是,現在我正在嘗試設置字體大小的動畫,以使字體也變得更小。
我對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);
}
});
只是為了清楚起見,其中帶有fontSize的jQuery行是那些不符合我想要的方式的行。
這是小提琴
這里是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路徑。 然后將其粘貼到您的代碼中。
您正在使用wrng選擇器,可以像這樣選擇td
:
$('table.menuItems td').stop().animate({fontSize: "25px"},50);
和
$('table.menuItems td').stop().animate({fontSize: "18px"},50);
更新的演示: http : //jsfiddle.net/52czbb73/2/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.