jquery issue in Chrome and Safari : working fine in Mozilla and Opera : please help

Question

I am having an issue with jquery in Chrome and Safari, the script is working fine in mozilla and opera.

Please check this link http://phpmagic.info/jquery/

When you click on the button, all the boxes should go down, then the value in the textare comeup in the first box, and same should happen as many times you click on the button, This is working fine in Mozilla and Opera but not is Chrome and safari (also in IE6), In these browsers no new boxes come down, only existing

Please give me solution (please check the source code):

<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

All new boxes created are sitting on top of one another in chrome because there is no element style "top" to push them down. Try adding the a top style in the div in this line:

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

Answer 2

Change your .link CSS rule to this:

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

Demo

Answer 3

Your problem is that you're trying to animate a property that doesn't exist on the new elements. When you run your initial document.ready, you're giving each div a top value of 0 or 61 x n. When you create your new divs, you're not giving any top value, so jQuery can't animate from null to 61 or whatever. Two things you can do here: set a default top value on your .link class of 0, or set a specific top value in the style attribute of the div you're adding. See a working example here:

http://jsfiddle.net/tns4H/

It's important to note here, too, that your animate takes 800 milliseconds. If you click the button twice in less than 800ms, jQuery won't be reading the final top value, it will be reading the current value. Rapid click on the linkit button to see what I mean.