关于jquery中的animate属性的快速问题,是否可以设置动画
我无法弄清楚怎么样? 这是我的HTML
<nav>
<a href="">Page 1</a>
<a href="">Page 2</a>
<a href="">Page 3</a>
<a href="">Page 4</a>
<a href="">Page 5</a>
<a href="">Page 6</a>
</nav>
<div style="height:9000px;"></div>
和javascript:
$(function(){
$('nav').data('size','big');
});
$(window).scroll(function(){
var $nav = $('nav');
var $a = $('nav > a');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'40px',
line-height:'40px'
}, 300);
$a.data('size','small').stop().animate({
height:'20px'
}, 300);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'100px',
line-height:'40px'
}, 300);
$a.data('size','big').stop().animate({
height:'40px'
}, 300);
}
}
});
还有一种方法可以让导航动画和a标签保持同步。
由于
抱歉,如果这是一个非常基本的问题 - 我是jquery的新手
答案 0 :(得分:1)
在这里,它是动画函数中的行高,应该是'line-height'
$(function(){
$('nav').data('size','big');
});
$(window).scroll(function(){
var $nav = $('nav');
var $a = $('nav > a');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'40px',
'line-height':'40px'
}, 300);
$a.data('size','small').stop().animate({
height:'20px'
}, 300);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'100px',
'line-height':'40px'
}, 300);
$a.data('size','big').stop().animate({
height:'40px'
}, 300);
}
}
});