Question

我试图制作动画，一切正常，但我似乎无法阻止用户在动画期间点击并打破页面布局。我已设法在div移动时停止用户，但是当一个div扩展时我无法阻止。

这是我的小提琴：http://fiddle.jshell.net/p2fo4ek0/18/

<div class="internet_wrap">
    <div class="internet tel" id="off_wrap">
        <div class="package" id="one">
            <div class="inner_package">
                <div class="title">title</div>
            </div>
        </div>

        <div class="package" id="two">
          <div class="inner_package">
                <div class="title">title</div>
            </div>
        </div>

        <div class="package" id="three">
           <div class="inner_package">
                <div class="title">title</div>
            </div>
        </div>
    </div>
</div>

var animating = false;

var clickedDiv, prevDiv, distance;

$('#off_wrap').on('click', '.package', function (e) {
    e.stopPropagation();
    if(animating == false) {
    animating = true;
            clickedDiv = $(this).closest('.package'),
            prevDiv = $("#off_wrap > :first-child"),
            distance = clickedDiv.offset().left - prevDiv.offset().left;

        if (!clickedDiv.is(":first-child")) {

            $.when(clickedDiv.animate({
               left: -distance
            }, 2000),
            prevDiv.animate({
                left: distance
            }, 2000)).done(function () {
                prevDiv.css('left', '0px');
                clickedDiv.css('left', '0px');
                //clickedDiv.css('width', $(window).width() - (clickedDiv.offset().left * 2));
                clickedDiv.css('z-index', '10000000');
                clickedDiv.css('overflow', 'visible');
                clickedDiv.find(".inner_package").animate({width: 260}, 2000); //regullo kte

                prevDiv.insertBefore(clickedDiv);
                clickedDiv.prependTo("#off_wrap");

                animating = false;
            });

        } else {
            clickedDiv.css('z-index', '1000');
            clickedDiv.find(".inner_package").css('transition', 'all 2s ease-in');
            clickedDiv.find(".inner_package").css('width', '260px');
        }

    }
});

    $(document).click(function() {
        animating = false;
        if(animating == false) {
            clickedDiv.css('z-index', '1');
            clickedDiv.find(".inner_package").css('transition', 'all 2s ease-in');
            clickedDiv.find(".inner_package").css('width', '60px');
            animating = false;
        }
    });

.internet {
    text-align:center;
    background: none repeat scroll 0% 0% rgba(248, 0, 140, 0.5);
    padding-bottom:10px;
    position: relative;
}

.internet .package {
    display: inline-block;
    /*border: 1px solid #FFFC00;*/
    height: 60px;
    width: 60px;
    border-radius: 30px;
    margin: 20px;
    background:#fff;
    color: rgba(0, 178, 248, 1);
    position: relative;
    cursor: pointer;
    vertical-align:middle;
}

.inner_package {
    display: inline-block;
    width: 60px;
    transition: all 2s ease-in;
    background: #fff;
    border-radius: 30px;
    height: 60px;
}

Answer 1

看起来你已经在尝试修复问题时放了很多代码。我对这个问题有点困惑，因为你的jsFiddle在动画期间点击不会给我带来麻烦。也许它只是你所说的某些情况。

无论哪种方式，我都看到了这一点。

$(document).click(function() {
    animating = false;
    if(animating == false) {
        clickedDiv.css('z-index', '1');
        clickedDiv.find(".inner_package").css('transition', 'all 2s ease-in');
        clickedDiv.find(".inner_package").css('width', '60px');
        animating = false;
    }
});

动画=假;在if语句之前和if语句函数内部似乎都是多余的，我怀疑其中一个需要读取animating = true;如果这样可以解决您的问题，请告诉我。

更新：虽然我自己也不了解动画，但我可以这么说。您使用动画作为控制多个动画运行的控件。你有一个声明似乎可能是你的问题。

if(animating == false) {
animating = true;
//do stuff
animating = false;
}

这可能是你的问题。尝试获得更具体的逻辑。像

if(animatingOne == false && animatingTwo == false && animatingThree == false) {
//logic to find out which animation is triggered
//turn the appropriate animation variable to true
//turn if off when done
}

如果这不起作用，继续玩逻辑。我怀疑一个变量动画无法适应你正在做的事情的复杂性。

在动画期间阻止动画

1 个答案: