使用 jQuery 淡化 div 背景颜色的简单方法？
修改字段时，我想突出显示该行的
$('.example_row')
.css('backgroundColor', '#ff7f0')
.animate({backgroundColor: '#d4d4d4'}, 5000)
.html(modifiedContent);
问题是整体背景不是#d4d4d4，它是一个渐变。因此，理想情况下，我只需将该行的
$('.example_row')
.addClass('modified')
.removeClass('modified', 5000)
.html(modifiedContent);
.modified只有1个css规则background-color: #ff7f00。 这里的问题是，删除该类意味着背景淡入纯白色，直到完全删除该类，然后突然变为真正的背景渐变。看起来很糟糕...
所以我知道我可以简单地在该行的
.animate({opacity: 0})。但由于其他原因我不想这样做......这里有一个简单的解决方案不需要注入额外的背景 更新：我创建了一个我的情况示例 在 jsfiddle 上以获得更清晰的解释。
When a field is modified I want to highlight the background color of the <div> for that row. Then slowly fade it back to normal. So I use jQuery and jQuery UI's color animation effect:
$('.example_row')
.css('backgroundColor', '#ff7f0')
.animate({backgroundColor: '#d4d4d4'}, 5000)
.html(modifiedContent);
The problem is the overall background is not #d4d4d4, it's a gradient. So ideally I would just change the background opacity from 1 to 0 for the <div> for that row. How do I do this? I tried jQuery UI's removeClass effect:
$('.example_row')
.addClass('modified')
.removeClass('modified', 5000)
.html(modifiedContent);
.modified just has the 1 css rule of background-color: #ff7f00.
The problem here is that removing the class means the background fades to solid white until the class if fully removed, then suddenly it changes to the true background gradient. Looks bad...
So I know that I could simply inject a new <div> with a 100% width and height within the <div> for that row and do a simple .animate({opacity: 0}). But I don't want to do that for other reasons... is there a simple solution here that doesn't require injecting an extra background <div>?
UPDATE: I created an example of my situation on jsfiddle for a clearer explanation.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
UI 中已存在突出显示效果，
请查看工作示例 http://jsfiddle.net/9YWWw/1/
A highlight effect already exist in UI,
Check working example at http://jsfiddle.net/9YWWw/1/