尝试按指定顺序更改 div 背景颜色

Question

使用 JQuery 的 jquery.animate-colors-min.js 插件，我正在尝试按顺序更改某些 div 框的背景颜色。

$('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow')

上面是我用来为第一个框设置动画的方法，效果很好，但我不知道我将如何启动回调（如果可能）来为下一个指定框的背景颜色设置动画。

下面这只是一个很好的例子，尽管正如预期的那样它不起作用

    $('#firstbox').click(function(){

    $('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow'), function(){
                 $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
        })

欢迎提出任何建议。

谢谢

Answer 1

试试这个

$('#firstbox').click(function(){

    $(this).animate({ backgroundColor: "#f6f6f6" }, 'slow', function(){
                 $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
        });
});

Answer 2

你有一个语法错误：

 $('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow'), function(){
     $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
 })

应该是：

 $('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow', function(){
     $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
 })

Answer 3

animate() 有三个参数

$('#firstbox').click(function(){
    $('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow', function(){
                 $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
    });
});