可以't设置子元素的字体大小的动画
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行并没有按照我想要的方式运行。
这是一个Fiddle
这里是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>
顺便说一句,在谷歌chrome中,你可以通过右键单击你想要的元素,然后选择CSS path
,将CSS路径复制到剪贴板,从开发者工具中获得CSS路径。然后将其粘贴到代码中。
您正在使用wrng选择器,您可以这样选择td
:
$('table.menuItems td').stop().animate({fontSize: "25px"},50);
和
$('table.menuItems td').stop().animate({fontSize: "18px"},50);
更新的演示:http://jsfiddle.net/52czbb73/2/
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 用Javascript更改我网站上的字体大小
- 如何使用jQuery在动画中期加速动画
- 使用数据上的角度更改设置集合的第一个元素的动画
- 如何使用css动画/javascript使具有背景图像的元素出现
- 在jQuery中,短距离长持续时间的精细字体大小动画
- 可以't设置子元素的字体大小的动画
- Raphael JS中的动画字体大小是否有流畅的转换可能性
- 如何在鼠标输入时对字体大小进行动画处理
- jQuery:滚动时平滑动画字体大小变化