Jquery - hide() then fadeIn() then fadeOut() is there a cleaner way?
<p>I'm trying to achieve some animation using jQuery. I have it working but I'm 100% sure there is a cleaner better way of doing and I'm hoping someone can point me in the right direction.</p>

<p>Here is my code:</p>

<pre><code>$(document).ready(function () {   
    $("#1-popup").hide(); // Hides the first popup
    $("#2-popup").hide(); // Hides the second popup
    $("#1-trigger").toggle(function () {
        $("#2-popup").fadeOut("slow"); // Hides the second popup just incase its showing
        $("#1-popup").fadeIn("slow"); // Fades in the first popup
    }, function () {
        $("#1-popup").fadeOut("slow"); // Fades out in the first popup
    });


    $("#2-trigger").toggle(function () {
        $("#1-popup").fadeOut("slow"); // Hides the first popup just incase its showing
        $("#2-popup").fadeIn("slow"); // Fades in the second popup
    }, function () {
        $("#2-popup").fadeOut("slow"); // Fades out the second popup
    });
});
</code></pre>

<p>Its a little messy is there anyway to use an if statement in this?</p>
