在我的网站上我显示了很多盒子,最多60个。每个盒子都可以悬停并拥有自己的颜色。我意识到以下js:
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).animate({ backgroundColor: $(this).css('background-color') },
1000);
});
});
当一个盒子悬停时,它应该以#68BFEF作为背景颜色,当鼠标离开盒子时,颜色应该变为它的旧值。
这是我应用css的方式:
<div id="primary">
<div class="box" style="background:...."></div>
<div class="box" style="background:...."></div>
<div class="box" style="background:...."></div>
....
</div>
我的问题是悬停效果应该更快,颜色应该更快地改变。另一个问题是并非所有的盒子都有旧的背景颜色。
有什么想法吗?
答案 0 :(得分:3)
离开悬停时,您需要拉出存储在数据中的基色,例如:
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).animate({ backgroundColor: $(this).data('baseColor') }, 1000);
});
});
或者,使用$.data()
代替更优化的版本:
$(".box").each( function () {
$.data(this, 'baseColor', $(this).css('color'));
$(this).hover(function() {
$(this).stop().animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).stop().animate({ backgroundColor: $.data(this, 'baseColor') }, 1000);
});
});