Animate for onclick on submit button only works in FF (not IE nor OP)

Question

Does anybody know why the following code only has effect in FF?

$(document).ready(function() {
    $('#powerSearchSubmitButton').click(function() {
        startLoad();
    });
});

function startLoad() {
    $('.message').each(function(i) {
        $(this).animate({ opacity: 0 }, 500);           
    });
};

Answer 1

***Update****

Example here http://pastebin.me/4937b07714655 of 1 option which is to keep a count of the messages and run the animation callback only on the last message.

---

why dont you return false from the click or event.preventDefault() and in the animation callback submit the form

$(document).ready(function() {
    $('#powerSearchSubmitButton').click(function(ev) {
        startLoad();
        ev.preventDefault();
    });
});

function startLoad() {
    var $messages=$('.message');
    var count=$messages.length -1;
    $messages.each(function(i) {
       $(this).animate({ opacity: 0 }, 500, i == count ? submitForm:null);           
    });
};

function submitForm(){
     $('#yourForm').submit();
}

Answer 2

Try adding 'return false;' to your click function. I set up a demo on my site and it works fine in IE6 and Opera.