jQuery on click not working every other time

Question

I have a few sliding screens that are triggered by clicking on images. The first time the image is clicked it seems to work fine but the third time the click is not working for some reason.

JS:

$(document).ready(function () {
    var sliding = false;
    var introButtons = anime({
        targets: '.introButtons',
        scale: 0.95,
        duration: 800,
        easing: 'easeInOutQuart',
        direction: 'alternate',
        elasticity: 200,
        loop: true
    });
    //Energy Track
    $('#for-energy').on('click dblclick', function () {
        if (!sliding) {
            sliding = true;
            $('#screen1').fadeOut('slow', function () {
                $('#screen2').toggle('slide', {
                    direction: 'right'
                }, 800, function () {
                    var twoRotation = anime({
                        targets: 'td img',
                        delay: 300,
                        opacity: 1,
                        rotate: '2turn'
                    });
                    sliding = false;

                });
            });
        }
    });
    //Energy back
    $('.energy .backButton').on('click dblclick', function () {
        if (!sliding) {
            sliding = true;
            $('#screen2').toggle('slide', {
                direction: 'left'
            }, 800, function () {
                $('#screen1').toggle('slide', {
                    direction: 'right'
                }, 800);
                //Remove Anime
                var removeAnime = anime({
                    targets: 'td img',
                    delay: 100,
                    opacity: 0,
                    rotate: '0'
                });
                sliding = false;
            });
        }
    });
    //For health
    $('#for-health').on('click dblclick', function () {
        if (!sliding) {
            sliding = true;
            $('#screen1').fadeOut('slow', function () {
                $('#health').toggle('slide', {
                    direction: 'right'
                }, 800, function () {
                    var twoRotation = anime({
                        targets: 'td img',
                        delay: 300,
                        opacity: 1,
                        rotate: '2turn'
                    });
                    sliding = false;

                });
            });
        }
    });
    //Health back
    $('.health .backButton').on('click dblclick', function () {
        if (!sliding) {
            sliding = true;
            $('#health').toggle('slide', {
                direction: 'left'
            }, 800, function () {
                $('#screen1').toggle('slide', {
                    direction: 'right'
                }, 800);
                //Remove Anime
                var removeAnime = anime({
                    targets: 'td img',
                    delay: 100,
                    opacity: 0,
                    rotate: '0'
                });
                sliding = false;
            });
        }
    });
    //For fun
    $('#for-fun').on('click dblclick', function () {
        if (!sliding) {
            sliding = true;
            $('#screen1').fadeOut('slow', function () {
                $('#fun').toggle('slide', {
                    direction: 'right'
                }, 800, function () {
                    var twoRotation = anime({
                        targets: 'td img',
                        delay: 300,
                        opacity: 1,
                        rotate: '2turn'
                    });
                    sliding = false;

                });
            });
        }
    });
    //For fun back
    $('.fun .backButton').on('click dblclick', function () {
        if (!sliding) {
            sliding = true;
            $('#fun').toggle('slide', {
                direction: 'left'
            }, 800, function () {
                $('#screen1').toggle('slide', {
                    direction: 'right'
                }, 800);
                //Remove Anime
                var removeAnime = anime({
                    targets: 'td img',
                    delay: 100,
                    opacity: 0,
                    rotate: '0'
                });
                sliding = false;
            });
        }
    });
});

I believe the issue is with the sliding variable, I just can't figure out which instance of the variable is causing the issue.

When clicking back and forth from bowls to smoothies to juices and selecting a few options it works the first few times you select a new product and then every third or so time it seems to stop working, i.e. it won't let you select any image. Clicking on the image does nothing.

You can see it in action here: http://ameliarthompson.com/development-works/Jamba-Juice-Nutrition-Facts%202/

I'm currently using the sliding variable to keep the toggle from being toggled twice if a user double clicks. See this question for more on what I'm talking about: jQuery slide toggle fires twice on double click

Answer 1

in some function you miss to make sliding = false

and i think you need to put it outside the toggle for example in #island you shoud write it like this and put sliding =false out side the toggle

 $('#island').on('click dblclick', function(){
        if(!sliding){
            sliding = true;
            $('.guide').fadeOut('slow', function(){
                $('#islandFacts').toggle('slide', {direction: 'right'}, 800, function(){

                    sliding = false;
                });
            });
        }
    });