如何一个接一个地旋转css立方体

Question

我有两个立方体。当我点击按钮时，我想逐个旋转它们。此时此刻，如果我点击它，它就会旋转。

$(function() {
  var x = 0;
  $('button').click(function() {
    x += 90;
    $('.cubeMain').each(function(index) {
      $(this).delay(500 * index).css(
        'transform', 'rotateY(' + x + 'deg)');
    });
  });
});

谢谢你的帮助

Answer 1

根据我的假设和您的代码，我相信您想延迟应用于div in循环的css。

delay()与动画(fx) queue一起工作。改变css属性不会通过该机制工作，因此不受delay指令的影响。

有一个解决方法。将代码更新为

$(function () {
    var x = 0;
    $('button').click(function () {
        x += 90;
        $('.cubeMain').each(function (index) {           
            $(this).delay(500 * index).queue(function (next) { 
                $(this).css('transform', 'rotateY(' + x + 'deg)'); 
                next(); 
            });
       }); 
    });
});

参考- http://jsfiddle.net/r2nuh5z3/1/