Question

This is an animation which should only fire if the div rip_tab has the class ‘rip_tab_ripped’, which is applied after the div is clicked on. However, the animation is firing even before the rip_tab_ripped class has been toggled. Each function works separately without the if clause. Any help would be appreciated–

var sauceSquirt = {
    init: function() {

        $("#rip_tab").click(function() {
            $(this).toggleClass("rip_tab_ripped");
        });



        function fireA() {
            $("#sauceRed").switchClass("sauce_hide", "sauceRedGo", 500)
        }

        function fireB() {
            $("#sauceBlue").switchClass("sauce_hide", "sauceBlueGo", 500)
        }

        if ($('#rip_tab').hasClass("rip_tab_ripped")) {


            $('#packet').click(function() {

                var events = [fireA, fireB];

                //declare counter
                if (!this.counter) {
                    this.counter = 0;
                }

                events[this.counter]();
                this.counter = (this.counter + 1) % 3;
            });



        }

    }

}

$(document).ready(function() {
    sauceSquirt.init();

});​

Answer 1

Looks like you are having trouble with this portion:

if ($('#rip_tab').hasClass("rip_tab_ripped")) {
    $('#packet').click(function() {

       var events = [fireA, fireB];

       //declare counter
       if(!this.counter) { this.counter = 0; }

       events[this.counter]();
       this.counter = (this.counter + 1) % 3;
    });
}

Can you just change it to:

$('#packet').click(function() {
    if ($('#rip_tab').hasClass("rip_tab_ripped")) {

           var events = [fireA, fireB];

           //declare counter
           if(!this.counter) { this.counter = 0; }

           events[this.counter]();
           this.counter = (this.counter + 1) % 3;
    }
    return false;
});

You can also take a look at jQuery Promise