Проблема с jquery в Chrome и Safari: отлично работает в Mozilla и Opera: пожалуйста, помогите

Question

У меня проблема с jquery в Chrome и Safari, скрипт отлично работает в mozilla и opera.

Пожалуйста, проверьте эту ссылку http://phpmagic.info/jquery/

При нажатии на кнопку, все коробки должны идти вниз, то значение в textare comeup в первом поле, и то же самое должно произойти столько раз, вы нажимаете на Это отлично работает в 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> 

Answer 1

Ваша проблема заключается в том, что вы пытаетесь оживить свойство, которое не существует на новых элементах. Когда вы запустите свой начальный document.ready, вы даете каждому div максимальное значение 0 или 61 x n. Когда вы создаете свои новые div, вы не даете никакого верхнего значения, поэтому jQuery не может анимировать от нуля до 61 или любого другого. Две вещи, которые вы можете сделать здесь: установите максимальное значение по умолчанию для вашего .link класса 0 или задайте определенное верхнее значение в атрибуте style добавляемого div. Смотрите рабочий пример здесь:

http://jsfiddle.net/tns4H/

Важно отметить также, что ваш одушевленные занимает 800 миллисекунд. Если вы дважды нажмете кнопку на менее чем 800 мс, jQuery не будет читать окончательное значение top, оно будет читать текущее значение. Быстро нажмите кнопку linkit, чтобы увидеть, что я имею в виду.

Answer 2

Все новые создаваемые коробки сидят друг над другом в хроме, потому что нет стиля элемента «сверху», чтобы сбить их. Попробуйте добавить верхний стиль в DIV в этой строке:

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

Answer 3

Изменение правила .link CSS к этому:

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

Demo