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

我认为问题在于滑动变量，我只是无法弄清楚变量的哪个实例导致问题。

当从碗到冰沙到果汁来回点击并选择一些选项时，它会在您选择新产品的前几次工作，然后每隔三分之一左右它就会停止工作，即它不会让您选择任何图像。点击图片什么都不做。

您可以在此处看到它：http://ameliarthompson.com/development-works/Jamba-Juice-Nutrition-Facts%202/

如果用户双击，我目前正在使用滑动变量来保持切换不被切换两次。有关我正在谈论的内容的更多信息，请参阅此问题：jQuery slide toggle fires twice on double click

Answer 1

在某些功能中你错过了 sliding = false

并且我认为你需要将它放在切换之外，例如在#island中你应该像这样写它并将slide = false放在切换

之外

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

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

jQuery点击不能每隔一段时间工作

1 个答案: