[英]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.