Question

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.

Here is my 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
    });
});

Its a little messy is there anyway to use an if statement in this?

Answer 1

How about being a bit more generic instead of writing code for every popup itself? 🙂

<div class="popup" id="popup1">Hi I'm Popup 1</div>
<div class="popup" id="popup2">Hi I'm Popup 2</div>
<a class="trigger" rel="popup1">show popup 1</a>
<a class="trigger" rel="popup2">show popup 2</a>
<script>
var popups = $('.popup').hide();
$('a.trigger').click(function() {
  var popup = $('#'+$(this).attr('rel'));
  popups.not(popup.fadeIn()).fadeOut();
});
</script>