Chrome：CSS＆JS转换不能正常工作

Question

我有三个图像img1，img2和img3（3图像）。它的初始位置是-50％绝对右上角和左侧。当我将位置更改为static，并且转换为2s时，它实际上需要移到中心。

问题虽然transiton正在发生，但是在某些镀铬物（在某些笔记本电脑的镀铬物中）中会卡住。我知道是什么让这个转折破裂。

这是我的jQuery代码。

 $(".middle-fixed-coming-soon-top").css({"top": "0px"}); 
     $(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-coming-soon-top").css({"position": "static"}); 
      // code to execute after transition ends 
     }); 

     $(".middle-fixed-organics-left").css({"left": "333px"}); 
     $(".middle-fixed-organics-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-organics-left").css({"position": "static"}); 
      $(".middle-fixed-organics-left .for-margin").css("margin-top", "auto"); 
      // code to execute after transition ends 
     }); 

     $(".middle-fixed-tagline-right").css({"right": "333px"}); 
     $(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-tagline-right").css({"position": "static"}); 
      $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto"); 
      // code to execute after transition ends 
     }); 

我是jQuery的新手。谁能帮忙？提前致谢。

EDITS
发生这种情况时，我第二次或更多的重新加载。

Answer 1

我注意到的最重要的事情是，您将一个元素从位置：绝对位置切换到静态位置。这意味着它从不影响周围内容转变为推动其他任何事情。我会使用相对而非绝对的，并完全取出静态开关。从那里，你应该只需要重新确定左/顶部定位。下面的代码应该处理所有的JS结束，只是CSS需求的位置：绝对切换到位置：相对。

 $(".middle-fixed-coming-soon-top").css({"top": "0px"}); 
     $(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      // code to execute after transition ends 
     }); 

     $(".middle-fixed-left").css({"left": "0px"}); 
     $(".middle-fixed-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-left .for-margin").css("margin-top", "auto"); 
      // code to execute after transition ends 
     }); 

     $(".middle-fixed-tagline-right").css({"right": "0px"}); 
     $(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto"); 
      // code to execute after transition ends 
     });