Browser compatibility in jQuery

Question

I have created a small webpage, where I would like to animate content using jQuery during navigation. It's working perfectly in Internet Explorer. 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.

what actually happens in firefox? nothing? Do you have Firebug installed in Firefox? It will help you track down the error. — Rik Heywood
– Rik Heywood, Commented Jul 2, 2009 at 7:07

Alconja · Accepted Answer · 2009-07-02 06:54:55Z

2

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)

edited Jul 2, 2009 at 6:54

answered Jul 2, 2009 at 6:36

Alconja

14.9k3 gold badges62 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Browser compatibility in jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related