Question

我在jquery中为div编写了一个淡化效果的代码。

$("#trigger").click(function(e){
    $("#divid").parent().css("background-color","#D18F8F");
    console.log($("#divid").parent().css("background-color"));
    e.preventDefault();
    $('html, body').animate({scrollTop:$("#divid").offset().top},'slow');
    $("#divid").parent().css("transition","background-color 2s linear");
    $("#divid").parent().css("background-color","transparent");
});

当我第一次点击#trigger时，它按预期工作，但下次点击触发器时它就不起作用了。这是控制台输出第一次rgb(209, 143, 143)，下次rgba(0,0,0,0)。

编辑：这是fiddle

Answer 1

要快速将背景颜色设置为＃D18F18F，您必须删除转换。否则，在#divid具有新的背景颜色之前，您必须再次等待2秒。

在.click函数的第一行添加：

$("#divid").parent().css("transition","none");

Answer 2

添加jQuery-UI，你可以使用.......

$("#trigger").click(function(e){
    $('html, body').animate({scrollTop:$("#divid").offset().top},'slow');
    $(".abc").animate({backgroundColor:"#D18F8F"},2000);
    $(".abc").animate({backgroundColor:"#FFFFFF"});
});

jsFiddle

jquery .css（）没有按预期工作

2 个答案: