use*_*958 2 jquery fonts colors hover jquery-animate
使用以下代码,尝试在悬停时使字体颜色动画化,类似于我的边框底色动画.更改边框底部颜色效果很好,但字体颜色似乎不会改变.这里有一个完整的例子:http: //www.buenolisto.com/alma.任何帮助是极大的赞赏.我也在调用jQuery UI:https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js
jQuery("li.social").hover(function() {
jQuery(this).find("img").stop(true, true).animate({
'marginTop': "-=20px"
}, 'fast');
}, function() {
jQuery(this).find("img").stop(true, true).animate({
'marginTop': "+=20px"
}, 'fast');
})
jQuery("li.reservas").hover(function() {
jQuery(this).find("img").stop(true, true).fadeOut({
'marginTop': "-=30px"
}, 'slow');
}, function() {
jQuery(this).find("img").stop(true, true).fadeIn({
'marginTop': "+=30px"
}, 'slow');
})
jQuery("ul.menu li").hover(function() {
jQuery(this).find("a").stop(true, true).animate({
'borderBottomColor': '#2E9ECE',
'color': '2E9ECE'
}, 'slow');
}, function() {
jQuery(this).find("a").stop(true, true).animate({
'borderBottomColor': '#FFDF85',
'color': 'FFDF85'
}, 'slow');
})?
通过查看你的代码,我可以告诉你已经忘记了#附近的CSS颜色,所以不是这个'color': '2E9ECE'使用这个'color': '#2E9ECE'.你可能也想要你的风格,我已经重写你最后一次悬停到这样的事情:
$('ul.menu li a').hover(
function() {
// do this on hover
$(this).animate({
'borderBottomColor': '#2E9ECE',
'color': '#2E9ECE'
}, 'slow');
},
function() {
// do this on hover out
$(this).animate({
'borderBottomColor': '#FFDF85',
'color': '#FEFEFE'
}, 'slow');
}
);
在我看来,这更具可读性和更短.看看jQuery API 悬停和动画
更新:我已经验证,此代码有效(使用最新版本的FireFox和Chrome测试):
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("a").hover(
function() {
$(this).animate({ color: "#00ff00" }, 'slow');
},function() {
$(this).animate({ color: "#ff0000" }, 'slow');
});
});
</script>
</head>
<body>
<a href="#">aaa</a><br />
<a href="#">bbb</a><br />
</body>
</html>
| 归档时间： |
|
| 查看次数： |
18421 次 |
| 最近记录： |