Javascript 发射太早

我正在尝试使用jQuery和css转换对一些动画进行排序。看起来容器宽度应该是动画的，直到小部件完成从“顶部”css更改的转换，但是它们一起启动

为什么

        widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

            widget.css({'top': top});

            widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

                container.css({'width': "19%"})

            });

        });

按与此相同的顺序设置动画

        widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

            widget.css({'top': top});

        });

        widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

            container.css({'width': "19%"})

        });

---

在第一个示例中，您需要在添加transitionEnd事件之前设置css。我相信这就是你错的地方

widget.css({
    'top': '200px'
}).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

    widget.css({
        'top': '0px'
    }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

        container.css({
            'width': "300px"
        }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

            container.css({
                'width': "50px"
            }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

                widget.css({
                    'width': "400px"
                })

            });
        });

    });

});

只要在jQuery中使用

one

而不是

on

，链接转换就可以正常工作

请参阅此JSFIDLE：

我不确定你是否在做一些不同的事情，但希望这会有所帮助

虽然就我个人而言，我会将其包装成一个助手函数，以避免编写太多特定于浏览器的代码。。。类似于此（未经测试）：

这样使用：

$(element).transition({top:'0px'}, function(){
      $(this).transition({top:'100px'}, function(){
          $(this).transition({top:'400px'}, function(){
               //Do something else
          });
    });
});

---

虽然使用缓存元素而不是每次都使用

$（这）

当然……

在第一个示例中，您需要在添加transitionEnd事件之前设置css。我相信这就是你错的地方

widget.css({
    'top': '200px'
}).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

    widget.css({
        'top': '0px'
    }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

        container.css({
            'width': "300px"
        }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

            container.css({
                'width': "50px"
            }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

                widget.css({
                    'width': "400px"
                })

            });
        });

    });

});

只要在jQuery中使用

one

而不是

on

，链接转换就可以正常工作

请参阅此JSFIDLE：

我不确定你是否在做一些不同的事情，但希望这会有所帮助

虽然就我个人而言，我会将其包装成一个助手函数，以避免编写太多特定于浏览器的代码。。。类似于此（未经测试）：

这样使用：

$(element).transition({top:'0px'}, function(){
      $(this).transition({top:'100px'}, function(){
          $(this).transition({top:'400px'}, function(){
               //Do something else
          });
    });
});

---

虽然使用缓存元素而不是每次都使用

$（此）

当然…

非常感谢！就是这样，没问题。很高兴我能提供帮助：）通过一些更改，helper函数可以工作：非常感谢！就是这样，没问题。很高兴我能提供帮助：）通过一些更改，helper函数可以工作：