Browser compatability in jquery

Question

I have created a small webpage, where I would like to animate content using jQuery during navigation. Its working perfectly in IE. If I use Firefox it's not working properly.

My code is as follows

$("#maincontent").animate({"top":"450px"},800, function(){
  $("#maincontent").html($("#"+Lidentity).html())
    .animate({"top":"-10px"},600)
    .animate({"top":"10px"},100)
    .animate({"top":"-5px"},100)
    .animate({"top":"5px"},100)
    .animate({"top":"0px"},100);
});

I have set the #maincontent element position as absolute.

Answer 1

If you're trying to make it look like it bounces with your animation, you're much better off using the easings from jQuery UI.

Example (based off your code):

$("#maincontent").animate({"top":"450px"},800, function(){
    $("#maincontent").html($("#"+Lidentity).html())
        .animate({"top":"0px"},800,"easeOutBounce");
});

Obviously for this to work you also need to add a reference to jQuery.UI (either the full bundle or at least effects.core.js & effects.bounce.js)