在Jquery中更改颜色
在Jquery中更改颜色
提问于 2015-07-02 08:24:24
我可以在JQuery中使用CSS慢慢地改变div的颜色吗?哦，还有一件事，我如何在div中添加第二个函数。这是代码。当mouseout发生时，我想把颜色改回原来的颜色。
<script>
function myFunction() {
$(document).ready(function () {
$("#square").css({ backgroundColor: 'blue' });
});
}
</script>
<div id="square" onmouseover="return myFunction()">Focus on me!</div>回答 4
Stack Overflow用户
回答已采纳
发布于 2015-07-02 08:25:38
要使它慢下来，给一个transition，并删除document.ready，因为您要调用它的东西没有加载：
#square {transition: 1s all linear;}跨浏览器支持
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;片段
$(document).ready(function () {
$("#square").hover(function () {
$(this).css("backgroundColor", 'blue');
}, function () {
$(this).css("backgroundColor", '');
});
});#square {width: 100px; height: 100px; transition: 1s all linear;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="square"></div>
Stack Overflow用户
发布于 2015-07-02 08:25:41
注意： jQuery UI项目通过允许一些非数字样式(如颜色)被动画化来扩展.animate()方法。该项目还包括通过CSS类而不是单个属性指定动画的机制。
使用.animate
<script>
function myFunction() {
$(document).ready(function () {
$("#square").animate({
backgroundColor: 'blue'
}, 500);
});
}
</script>在这种情况下，转换是500 ms。
Stack Overflow用户
发布于 2015-07-02 08:25:28
您可以使用.animate()设置带有延迟的css效果：
$("#square").animate({backgroundColor: 'blue'}, 500});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31179267
复制相关文章
相似问题
腾讯云开发者
