Question

我有三张图片img1，img2和img3（3张图片）。它的初始位置分别是-50％绝对右上角和左上角。当我将位置更改为static时，如果转换为2s，则需要将其移至中心位置。

问题当过渡时间正在发生时，它会卡在一些铬合金中（在一些笔记本电脑的铬合金中）。我知道是什么让转型失败了。

这是我的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

我注意到的最重要的事情是你将一个元素从position：absolute转换为position：static。这意味着它不会影响周围的内容，而是将所有其他内容排除在外。我使用相对而不是绝对，并完全取出静态开关。从那里，你应该只需要重新kerjigger左/顶定位。下面的代码应该处理所有的JS端，只需要CSS需要的位置：绝对切换到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
        });

Chrome：CSS＆amp; JS转换无法正常工作

1 个答案: