Chrome和Safari中的jQuery問題：在Mozilla和Opera中運行正常：請幫忙

我在Chrome和Safari中遇到jquery問題，該腳本在Mozilla和Opera中運行正常。Chrome和Safari中的jQuery問題：在Mozilla和Opera中運行正常：請幫忙

當你點擊按鈕，所有的箱子應該在textare川方往下走，則該值在第一個框，同樣應該發生，因爲很多時候你點擊按鈕，這在Mozilla和Opera中工作正常，但不是Chrome和safari（也在IE6中），在這些瀏覽器中沒有新盒子下來，只存在

請給我解決方案（請檢查源代碼）：

<script language="javascript" src="jquery-1.4.2.min.js"></script> 
<script language="javascript"> 
    $(document).ready(function() { 
     var top = 0; 
     $('#contents div').each(function(index, val) { 
      $(this).css('top', top + 'px'); 
      top = top + 61; 
     }); 

     $('#btn').bind('click', function() { 
      $('#contents div').each(function(index, val) { 
       var newtop = parseInt($(this).css('top')) + 61; 

       //$(this).css('top',newtop +'px');; 
       $(this).animate({ 
        top: newtop + 'px' 
       }, 800, function() { 
        // 
       }); 
      }); 

      $('#contents div:first').before('<div class="link">' + document.getElementById('val').value + '</div>'); 
     }); 
    }) 
</script>

來源

2010-10-12 Thomas John

它創建新的'div'很好，但他們沒有正確地移動。 ...爲什麼在使用jQuery時使用'document.getElementById（）'？ – 2010-10-12 18:22:49

您的問題是你想動畫新元素上不存在的屬性。當你運行你的初始document.ready時，你會給每個div一個0或61 x n的最高值。當你創建新的div時，你沒有給出任何最高值，所以jQuery不能從null動畫到61或其他任何東西。你可以在這裏做兩件事：在你的.link類中設置一個默認的頂級值，或者在你添加的div的style屬性中設置一個特定的頂級值。在這裏看到一個工作示例：

http://jsfiddle.net/tns4H/

它這裏需要注意的是非常重要的，那就是，你的動畫需要800毫秒。如果你在小於800ms的時間點擊兩次按鈕，jQuery將不會讀取最終的top值，它將讀取當前值。快速點擊linkit按鈕查看我的意思。

來源

2010-10-12 18:27:25 treeface

所有新建的箱子都在鉻合金中互相坐在一起，因爲沒有任何元素樣式「頂部」將其推倒。嘗試在此行中添加一個頂級的風格在div：

$('#contents div:first').before('<div class="link">'+document.getElementById('val').value+'</div>');

來源

2010-10-12 18:23:06

您.link CSS規則改成這樣：

.link{ 
    border:#CCCCCC solid 1px; 
    margin:5px; 
    height:55px; 
    position:absolute; 
    width:588px; 
    top:0; /* <-- the key */ 
}

Demo

來源

2010-10-12 18:26:23

Chrome和Safari中的jQuery問題：在Mozilla和Opera中運行正常：請幫忙

回答

相關問題