Javascript Chrome:CSS&；JS转换无法正常工作

我有三张图片

img1

，

img2

和

img3

（三张图片）。它的初始位置分别为右上角和左上角绝对值的-50%。当我将位置更改为

静态

，使用转换

2s

时，它实际上需要移动到中间

问题在传输过程中，某些chrome（在某些笔记本电脑的chrome中）会发生故障。我知道是什么让过渡破裂了

这是我的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。有人能帮忙吗？提前谢谢

编辑

---

当我第二次或更多次重新加载时会发生这种情况。

我注意到的最大一点是，您正在将元素从位置：绝对切换到位置：静态。这意味着它从不影响周围的内容转变为将其他一切都推到一边。我会使用相对而不是绝对，并且完全去掉静态开关。从这里开始，您只需重新调整kerjigger的左/顶部位置。下面的代码应该处理所有JS端，只是CSS需要position:absolute才能切换到position:relative

        $(".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
        });

---

我注意到的最大的一点是，您正在将元素从position:absolute切换到position:static。这意味着它从不影响周围的内容转变为将其他一切都推到一边。我会使用相对而不是绝对，并且完全去掉静态开关。从这里开始，您只需重新调整kerjigger的左/顶部位置。下面的代码应该处理所有JS端，只是CSS需要position:absolute才能切换到position:relative

        $(".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
        });

---

在哪个版本中不起作用？因为您的转换使用绝对像素，这意味着转换工作完美，但是只有一个精确的屏幕宽度——1360px，它是基于Ubuntu 14.04构建的51.0.2704.79版，在哪个版本中不工作？因为你的转换使用绝对像素，这意味着转换工作完美，但是只有一个精确的屏幕宽度——1360px它是基于Ubuntu 14.04构建的

51.0.2704.79版，那么为什么它只在私有选项卡中工作而不在普通选项卡中工作呢？真奇怪。我也清除了缓存。因此，我需要将所有内容转换为相对？？？，如果您只是删除css（{“position”：“static”}）；从你的JS和change.middle fixed即将登顶，.middle fixed triesta organics left，.middle fixed tagline right从position:absolute到position:relative，应该会修正跳跃。但是你需要稍微调整一下JS中末端状态的左/上位置以进行补偿。我刚刚编辑了你发布的代码来处理位置更改，在CSS中进行了绝对到相对的修复，应该可以处理任何屏幕大小。谢谢，我已经做了更改，但是我仍然看到了延迟。看起来有什么东西在根据屏幕大小为左/右动画设置不同的值。为什么它只在“私人”选项卡中工作，而不在“普通”选项卡中工作？真奇怪。我也清除了缓存。因此，我需要将所有内容转换为相对？？？，如果您只是删除css（{“position”：“static”}）；从你的JS和change.middle fixed即将登顶，.middle fixed triesta organics left，.middle fixed tagline right从position:absolute到position:relative，应该会修正跳跃。但是你需要稍微调整一下JS中末端状态的左/上位置以进行补偿。我刚刚编辑了你发布的代码来处理位置更改，在CSS中进行了绝对到相对的修复，应该可以处理任何屏幕大小。谢谢，我已经做了更改，但是我仍然看到了延迟。看起来有东西在根据屏幕大小为左/右动画设置不同的值