Question

I’ve got to fade the page out before posting the form action. I’m not sure if this is even possible, so I don’t know where to begin.

That said, I do know how to do it for links… javascript below. Thanks for your help!

HTML form I need to intercept the post method from

<form id="postitron" method="post" action="/postitron/answertron.php">

JavaScript I’ve used for anchor tags

var $linkLocation;

function redirectPage(){
    window.location = $linkLocation;
}

$('a.transition').click(function(event){
    event.preventDefault();
    $linkLocation = this.href;
    $('#page').animate({opacity:0},400, function(){
        redirectPage();
    });
});

---

UPDATE:

So many answers! Thank you!

I’ve implemented the gist of what was recommended across the board and am getting an infinite loop of animation.. what am I missing?

I’ve made a JSFiddle to demonstrate… it doesn’t animate in an infinite loop… but it doesn’t return a 404 either. Weird!?

HTML

<form id="postitron" method="post" action="/postitron/answertron.php">
  <input type="hidden" name="acces" value"yes">
  <input id="submit" type="submit" value="DOIT">
</form>

JavaScript

$('#postitron').submit(function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

---

UPDATE #2

@Ahren suggested that @Priyank Patel’s use of the .one() method would prevent the animation from looping infinitely, which it did (yay!), but my console is now returning an error that’s preventing the form submission:

Uncaught TypeError: Property ‘submit’ of object # is not a function

Here’s the updated JavaSript

$('#postitron').one('submit', function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

---

Update #3

Further thought on it… The .one() method executes the handler once for the element.. is that preventing the same submit() method from being executed once the animation fades?

---

Update #4

jQuery animate in infinite loop

Answer 1

You can use basically the same code, but bind to the form submission instead. I believe jQuery is smart enough not to infinite loop this.

$(<submitbutton>).click(function(event){
    event.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('form').submit();
    });
});

Update – based on feedback from technopeasant, you can avoid the infinite loop by binding to click event of button instead of submit event.