jQuery 每次点击都不起作用

Question

我有几个通过点击图片触发的滑动屏幕。第一次点击图像似乎工作正常，但第三次点击由于某种原因不起作用。

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;
            });
        }
    });
});

我认为问题出在滑动变量上，我只是无法确定是哪个变量实例导致了问题。

当从碗到冰沙再到果汁来回点击并select选择一些选项时，前几次你select一个新产品时它会起作用，然后每隔三次左右似乎停止工作，即它不会让你 select 任何图像。点击图片没有任何反应。

您可以在此处查看实际效果：http://ameliarthompson.com/development-works/Jamba-Juice-Nutrition-Facts%202/

我目前正在使用滑动变量来防止用户双击时切换两次。有关我在说什么的更多信息，请参阅此问题：

Answer 1

在一些你错过的功能中 sliding = false

我认为你需要把它放在开关外面，例如在#island 你应该这样写，然后把滑动 =false 放在 toggle[=11= 外面]

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

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

jQuery 每次点击都不起作用

jQuery on click not working every other time

html

javascript

jquery

slidetoggle