jQuery悬停问题
jQuery悬停问题
提问于 2010-12-16 18:41:25
在我的网站上，我展示了很多方框，多达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>我的问题是，悬停效果应该更快，颜色变化应该更快。另一个问题是，并不是所有的盒子都有旧的背景颜色。
有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-12-16 18:43:29
离开悬停时，您需要提取存储在数据中的基色，例如：
$(".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);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4459839
复制相关文章
相似问题
腾讯云开发者
