通過jquery制作元素“css-absolute”時的奇怪跳躍

Question

我試圖“絕對化”先前相對的DOM元素，每次我嘗試它時，都會發生“跳躍”，我只是不知道我做錯了什么或者如何解決這個問題。

好的，JS_fidle可以在這里找到http://jsfiddle.net/rhqy3/3/

這是虛擬HTML

<html>
<body>
    <br><br><h1>one</h1><br><br><br><br>
    <h2>two</h2>
</body>
</html>

這是javascript（使用jquery）

jQuery.fn.absolutize = function()
{
  return this.each(function()
  {
    var element = jQuery(this);
    if (element.css('position') == 'absolute')
    {
      return element;
    }
    alert('now a jump happens, that should not happen')
    element.css("position", "absolute");
    element.css(element.offset());
    return element;

  });
}


$(document).ready(function() {
            window.setTimeout(function(){$("h1, h2").absolutize()}, 2000)
        });

好吧，好吧，兩秒后，當我想將元素設置為它們的絕對等值時，有一個......跳躍？！？ 我不知道為什么。 我嘗試了$(element).position()而不是offset() ，但沒有成功。

更新：澄清 - h1保持原樣，h2跳躍。 我測試了google chrome最新，firefox最新的mac os x lion。

我的目標是將元素（與絕對的jquery插件競爭）設置為真正的（不跳躍）等效的css絕對位置，怎么做？ thx，我真的很感激，感謝你的時間。

更新2 ：heureka，我已經確定了問題（仍然缺少解決方案）！ 問題： DOM太快了 。 這個腳本做了什么：它獲取h1元素，說：從相對上下文（正常渲染流程）中取出並將其設置為“絕對”，此時瀏覽器重排發生 - 因為H1不再在那里，一切都向上移動。 發生了跳躍。 這太快了，我們沒有看到它。 現在jquery函數進入h2並說“絕對”但是在這一刻h2元素已經具有“新的”相對定位，跳躍確實已經發生了。 這不是每個人都看到它的原因， 這是一個競賽條件 。 如果瀏覽器要慢速觸發重排，DOM仍然保留舊值。 好的，該做什么：我們必須收集所有元素的位置值（將它們保存在某處），然后，在收集所有位置值之后，我們將一個元素一個接一個地更新。 不太確定如何在jquery插件的上下文中執行此操作，但我會接受它（今晚，現在重新開始工作）。

更新3 ：下面的答案是這個問題的正確答案。 多謝。 這個問題沒有解決的一件事（因為我沒有要求）是一個問題，其他元素，可能取決於相對定位的元素然后做一些回流舞蹈（因為突然絕對化的元素失蹤），這小jquery插件解決了這個https://gist.github.com/4051578 ，它是一個名為jquery.bodysnatch.js的jquery插件，因為它的目的是“jquery插件用自己的絕對定位克隆替換元素，同時隱藏和靜音原件“ 玩得開心。

Answer 1

干得好！

http://jsfiddle.net/rhqy3/9/

    (function($){
        $.fn.absolutize = function() {
            var elems = [];
            this.each(function() {
                var element = $(this);

                if (element.css('position') == 'absolute') return;

                var offset = element.offset();
                elems.push({
                    el: element,
                    newRules: {
                        position: 'absolute',
                        top: offset.top,
                        left: offset.left
                    }
                });
            });

            $.each(elems, function(i, obj){
                obj.el.css( obj.newRules );
            });
        };

        $(document).ready(function() {
            window.setTimeout(function(){
                $("h1, h2").absolutize()
            }, 2000);
        });

    })(jQuery);

問題是，它通過每個傳遞給absolutize（）的元素一次一個，獲取偏移量並應用它。 當它要求h2的偏移時，h1已經從文檔流中移除。

可能有一種更好的方法來編碼，但想法是，在更改每個位置之前緩存元素的偏移量。

Answer 2

在將其設為`absolute`之前，您需要獲取當前元素坐標：

element.css(element.offset());
element.css("position", "absolute");

小提琴： http ： //jsfiddle.net/BYcdn/

Answer 3

嘗試這個：

jQuery.fn.absolutize = function(){

     return this.each(function(){

        var element = $(this);
        element.css("top",element.position().top);
        element.css("left",element.position().left);
        //alert(element.position().top);
        element.css("position", "absolute");

        if (element.css('position') == 'absolute'){
            return element;
        }

  });
}


$(document).ready(function() {
  window.setTimeout(function(){$("h1, h2").absolutize()}, 2000)
});

通過jquery制作元素“css-absolute”時的奇怪跳躍

問題描述

3 個解決方案

解決方案1
3 已采納 2012-11-09 15:11:42

解決方案2
0 2012-11-09 11:00:27

在將其設為`absolute`之前，您需要獲取當前元素坐標：

小提琴： http ： //jsfiddle.net/BYcdn/

解決方案3
0 2012-11-09 11:24:00

通過jquery制作元素“css-absolute”時的奇怪跳躍

問題描述

3 個解決方案

解決方案1 3 已采納 2012-11-09 15:11:42

解決方案2 0 2012-11-09 11:00:27

在將其設為absolute之前，您需要獲取當前元素坐標：

小提琴： http ： //jsfiddle.net/BYcdn/

解決方案3 0 2012-11-09 11:24:00

解決方案1
3 已采納 2012-11-09 15:11:42

解決方案2
0 2012-11-09 11:00:27

在將其設為`absolute`之前，您需要獲取當前元素坐標：

解決方案3
0 2012-11-09 11:24:00