Question

您能否看一下这段代码，让我知道为什么我无法在点击事件中为canvas div的背景颜色设置动画？

<div class="colbox" id="yellow"></div>
<div class="colbox" id="green"></div>
<div class="colbox" id="red"></div>

$(".colbox").on("click", function () {
   $("#canvas").animate({backgroundColor: $(this).css("background-color")});
});

由于

Answer 1

HTML：

<div class="colbox" id="yellow"></div>
<div class="colbox" id="green"></div>
<div class="colbox" id="red"></div>
<div id="canvas"></div>

CSS：

body {
    min-height: 200px;
}
#canvas {
    width: 200px;
    height: 200px;
    background: #CCC;
    border: 1px solid #CCC;
    margin-top: 80px;
}
.colbox {
    width: 50px;
    height: 50px;
    display: inline-block;
    float: left;
    border: 1px solid #CCC;
    margin-right: 5px;
    position: fixed;
    top: 10px;
}
#yellow {
    background-color: yellow;
}
#green {
    background-color: green;
    left: 70px;
}
#red {
    background-color: red;
    left: 130px;
}

JS：

$(".colbox").click(function () {
    $('#canvas').animate({
        backgroundColor: $(this).css('backgroundColor') 
    }, 500);
});

这是工作jsfiddle

尝试在您正在创建的html中包含jQuery UI。

Answer 2

您可以使用css transition

执行此操作

而不是.animate()使用.css()

$('.colbox').on('click',function(){
   $("#canvas").css({'background-color':$(this).css('background-color')});
});

然后设置#canvas为使用以下内容更改背景颜色时的过渡设置动画：

#canvas{
    transition:background-color 1s ease;
    -webkit-transition:background-color 1s ease;
    -moz-transition:background-color 1s ease;
    -o-transition:background-color 1s ease;
    -ms-transition:background-color 1s ease;
}

演示：

http://jsfiddle.net/3DRDL/

点击动画Div背景颜色的问题

2 个答案: