Question

我有一个用鼠标滚轮事件调用的函数，它启动动画，如果在动画完成之前多次播放动画，可能会被误解。我尝试使用setTimeout或setInterval，但都保留了内存中的事件数（并严重重复我的动画）。目标是能够立即调用我的函数并等待2s才能再次发起事件。

将添加此代码：JSFiddle

var scroll = 0;
$('body').bind('mousewheel', function(e) {
  if (scroll < 8) scroll++;
  else {
    scroll = 0;

  // My code...

}
});

Answer 1

您可以使用:animated选择器来测试上一个动画是否已在进行中：

if ($(':animated').length > 0) {
    console.log('animation stopped because already in progress....');
    return;
}

$('body').on('mousewheel', function (e) {
    if ($(':animated').length > 0) {
        console.log('animation stopped because already in progress....');
        return;
    }
    if ($('.ecampus').css('display') == 'block') {

        if (e.originalEvent.wheelDelta < 0) {

            $('.ecampus').fadeOut();
            $('.pegasebuzz').fadeIn();
        } else {
            // TOP PAGE
        }
        return;
    }

    if ($('.pegasebuzz').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            $('.pegasebuzz').fadeOut();
            $('.notrecoin').fadeIn();
        } else {
            $('.pegasebuzz').fadeOut();
            $('.ecampus').fadeIn();
        }
        return;
    }

    if ($('.notrecoin').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // BOTTOM PAGE
        } else {

            $('.notrecoin').fadeOut();
            $('.pegasebuzz').fadeIn();
        }
        return;
    }
});

body {
    margin: 0;
}

.ecampus {
    width: 100%;
    height: 100%;
    background: red;
    display: block;
    position: absolute;
}

.pegasebuzz {
    width: 100%;
    height: 100%;
    background: blue;
    display: none;
    position: absolute;
}

.notrecoin {
    width: 100%;
    height: 100%;
    background: yellow;
    display: none;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="ecampus">
    E-CAMPUS
    <br/>(Scroll down)
</div>
<div class="pegasebuzz">
    PEGASEBUZZ
</div>
<div class="notrecoin">
    NOTRE COIN
</div>

另一种方法可以基于：

在开始动画之前将属性设置为body元素
当动画结束时删除属性
第一步是：测试属性是否存在

但这种方法意味着你需要动画流程。在你的情况下，你有一个fadeOut和fadeIn的并发序列。我建议你使用完整的方法，如下面的代码片段。

if ($('body').data('animationinprogress') !== undefined) {

     console.log('animation stopped because already in progress....');

     return;
  }

$('body').on('mousewheel', function (e) {
    if ($('body').data('animationinprogress') !== undefined) {
        console.log('animation stopped because already in progress....');
        return;
    }
    if ($(':animated').length > 0) {
        console.log('animation stopped because already in progress....');
        return;
    }
    if ($('.ecampus').css('display') == 'block') {

        if (e.originalEvent.wheelDelta < 0) {

            $('body').data('animationinprogress', true);
            $('.ecampus').fadeOut(400, function() {
                $('.pegasebuzz').fadeIn(400, function() {
                    $('body').removeData('animationinprogress');
                });
            });
        } else {
            // TOP PAGE
        }
        return;
    }

    if ($('.pegasebuzz').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            $('body').data('animationinprogress', true);
            $('.pegasebuzz').fadeOut(400, function() {
                $('.notrecoin').fadeIn(400, function() {
                    $('body').removeData('animationinprogress');
                });
            });
        } else {
            $('body').data('animationinprogress', true);
            $('.pegasebuzz').fadeOut(400, function() {
                $('.ecampus').fadeIn(400, function() {
                    $('body').removeData('animationinprogress');
                });
            });

        }
        return;
    }

    if ($('.notrecoin').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // BOTTOM PAGE
        } else {
            $('body').data('animationinprogress', true);
            $('.notrecoin').fadeOut(400, function() {
                $('.pegasebuzz').fadeIn(400, function() {
                    $('body').removeData('animationinprogress');
                });
            });

        }
        return;
    }
});

body {
    margin: 0;
}

.ecampus {
    width: 100%;
    height: 100%;
    background: red;
    display: block;
    position: absolute;
}

.pegasebuzz {
    width: 100%;
    height: 100%;
    background: blue;
    display: none;
    position: absolute;
}

.notrecoin {
    width: 100%;
    height: 100%;
    background: yellow;
    display: none;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="ecampus">
    E-CAMPUS
    <br/>(Scroll down)
</div>
<div class="pegasebuzz">
    PEGASEBUZZ
</div>
<div class="notrecoin">
    NOTRE COIN
</div>

另一种可能性，如果在具有名称的外部函数中定义处理程序单击处理程序逻辑。例如，使用先前的技术，而是定义一个属性，您可以使用.on() / .off()方法来启用/禁用事件处理程序：

// disable mousewheel
$('body').off('mousewheel');
.......
// enable mousewheel
$('body').on('mousewheel',mousewheelHandler);

function mousewheelHandler(e) {
    if ($('.ecampus').css('display') == 'block') {

        if (e.originalEvent.wheelDelta < 0) {
            // disable mousewheel
            $('body').off('mousewheel');
            $('.ecampus').fadeOut(400, function() {
                $('.pegasebuzz').fadeIn(400, function() {
                    // enable mousewheel
                    $('body').on('mousewheel',mousewheelHandler);
                });
            });
        } else {
            // TOP PAGE
        }
        return;
    }

    if ($('.pegasebuzz').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // disable mousewheel
            $('body').off('mousewheel');
            $('.pegasebuzz').fadeOut(400, function() {
                $('.notrecoin').fadeIn(400, function() {
                    // enable mousewheel
                    $('body').on('mousewheel',mousewheelHandler);
                });
            });
        } else {
            // disable mousewheel
            $('body').off('mousewheel');
            $('.ecampus').fadeOut(400, function() {
                $('.notrecoin').fadeIn(400, function() {
                    // enable mousewheel
                    $('body').on('mousewheel',mousewheelHandler);
                });
            });
        }
        return;
    }

    if ($('.notrecoin').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // BOTTOM PAGE
        } else {
            // disable mousewheel
            $('body').off('mousewheel');
            $('.notrecoin').fadeOut(400, function() {
                $('.pegasebuzz').fadeIn(400, function() {
                    // enable mousewheel
                    $('body').on('mousewheel',mousewheelHandler);
                });
            });

        }
        return;
    }
}

$('body').on('mousewheel',mousewheelHandler);

body {
    margin: 0;
}

.ecampus {
    width: 100%;
    height: 100%;
    background: red;
    display: block;
    position: absolute;
}

.pegasebuzz {
    width: 100%;
    height: 100%;
    background: blue;
    display: none;
    position: absolute;
}

.notrecoin {
    width: 100%;
    height: 100%;
    background: yellow;
    display: none;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="ecampus">
    E-CAMPUS
    <br/>(Scroll down)
</div>
<div class="pegasebuzz">
    PEGASEBUZZ
</div>
<div class="notrecoin">
    NOTRE COIN
</div>

答案更新

在你的上一个fiddle中，你正在混合TweenMax和jQuery动画因此，你需要一个混合测试：

第一个检查TweenMax是否正在进行活动动画
第二个正在进行的jQuery动画

if（tweenActiveAnimatoins.length＆gt; 0 || $（'：animated'）。length＆gt; 0）{
```
console.log('animation stopped because already in progress....');

return;
```
}

var tweenVars = [];
$(window).on('wheel', function (e) {
    var tween;
    var tweenActiveAnimatoins = tweenVars.filter(function(ele, idx) {
        return ele.isActive();
    });
    if (tweenActiveAnimatoins.length > 0 || $(':animated').length > 0) {
        console.log('animation stopped because already in progress....');
        return;
    }
    //
    // empty the array
    //
    tweenVars = [];
    if ($('.ecampus').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            $('.ecampus').fadeOut();
            $('.pegasebuzz').fadeIn();
            tween = TweenLite.from($('.pegasebuzz .corner-title'), 0.5, {
                opacity: 0,
                delay: 0.2
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .text-project'), 1, {
                opacity: 0,
                marginTop: '15px',
                delay: 0.7
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .bottom-left img'), 1.5, {
                opacity: 0,
                marginTop: "-95px",
                marginLeft: "40px",
                delay: 1
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .top-right img'), 1, {
                opacity: 0,
                marginTop: "60px",
                delay: 1.3
            });
            tweenVars.push(tween);
        } else {
            // TOP PAGE
        }
        return;
    }
    if ($('.pegasebuzz').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            $('.pegasebuzz').fadeOut();
            $('.notrecoin').fadeIn();
            tween = TweenLite.from($('.notrecoin .corner-title'), 0.5, {
                opacity: 0,
                delay: 0.5
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.notrecoin .text-project'), 1, {
                opacity: 0,
                marginTop: '15px',
                delay: 1
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.notrecoin .top-right img'), 1, {
                opacity: 0,
                marginTop: "60px",
                delay: 2
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.notrecoin .bottom-left img'), 1.5, {
                opacity: 0,
                marginTop: "-95px",
                marginLeft: "40px"
            });
            tweenVars.push(tween);
        } else {
            $('.pegasebuzz').fadeOut();
            $('.ecampus').fadeIn();
        }
        return;
    }
    if ($('.notrecoin').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // BOTTOM PAGE
        } else {

            $('.notrecoin').fadeOut();
            $('.pegasebuzz').fadeIn();
            tween = TweenLite.from($('.pegasebuzz .corner-title'), 0.5, {
                opacity: 0,
                delay: 0.5
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .text-project'), 1, {
                opacity: 0,
                marginTop: '15px',
                delay: 1
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .top-right img'), 1, {
                opacity: 0,
                marginTop: "60px",
                delay: 2
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .bottom-left img'), 1.5, {
                opacity: 0,
                marginTop: "-95px",
                marginLeft: "40px",
                delay: 1.5
            });
            tweenVars.push(tween);
        }
        return;
    }
});

body {
    background: #141415;
    margin: 0;
    padding: 0;
    overflow: auto;
    font-family: 'Montserrat';
}

#fullPage {
    /*    box-shadow: inset 0px 0px 200px 100px rgba(0, 0, 0, 0.1);*/
    width: 100vw;
    height: 100vh;
    outline: 17px solid;
    outline-offset: -40px;
    position: fixed;
}

.gridPage {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    padding: 40px;
    position: relative;
}

.strokeGrid {
    stroke-width: 17;
    stroke: #0c0c0d;
}

.wrapper {
    width: calc(100vw - 80px);
    height: calc(100vh - 80px);
    padding: 40px;
}

.top-left {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    display: inline-block;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}

.top-right {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    margin-left: 13px;
    display: inline-block;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}

.bottom-left {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    display: inline-block;
    margin-top: 18px;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}

.bottom-right {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    display: inline-block;
    margin-top: 18px;
    margin-left: 13px;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}

/* NAVIGATION */

nav {
    top: 85px;
    right: 0;
    position: absolute;
}

/* PEGASEBUZZ */
.pegasebuzz {
    position: fixed;
    display: none;
}

.pegasebuzz .corner-title {
    font-weight: 200;
    font-size: 12pt;
    color: #2548f9;
    margin: 50px 50px 0 50px;
    position: absolute;
}

.pegasebuzz .corner-title span {
    color: #595959;
}

.pegasebuzz .text-project {
    width: 65%;
    min-width: 370px;
    font-weight: 200;
    font-size: 10pt;
    color: #b1b1b1;
    line-height: 15pt;
    padding: 120px 50px 50px 50px;
    position: relative;
}

.pegasebuzz .bottom-left img {
    max-height: 60vh;
    margin-top: -13vh;
    z-index: 40;
    position: absolute;
}

.pegasebuzz .top-right img {
    max-width: 60vw;
    height: auto;
    width: auto;
    max-height: 75vh;
    top: 8vh;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 50;
}

/* NOTRE COIN */
.notrecoin {
    position: fixed;
    display: none;
}

.notrecoin .corner-title {
    font-weight: 200;
    font-size: 12pt;
    color: #2548f9;
    margin: 50px 50px 0 50px;
    position: absolute;
}

.notrecoin .corner-title span {
    color: #595959;
}

.notrecoin .text-project {
    width: 65%;
    min-width: 370px;
    font-weight: 200;
    font-size: 10pt;
    color: #b1b1b1;
    line-height: 15pt;
    padding: 120px 50px 50px 50px;
    position: relative;
}

.notrecoin .bottom-left img {
    max-width: 70vw;
    max-height: 65vh;
    bottom: 4%;
    position: absolute;
    z-index: 40;
}

.notrecoin .top-right img {
    max-width: 60vw;
    height: auto;
    width: auto;
    max-height: 75vh;
    top: 8vh;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 50;
}

/* E-CAMPUS */
.ecampus {
    position: fixed;
    display: block;
}

.ecampus .corner-title {
    font-weight: 200;
    font-size: 12pt;
    color: #2548f9;
    margin: 50px 50px 0 50px;
    position: absolute;
}

.ecampus .corner-title span {
    color: #595959;
}

.ecampus .text-project {
    width: 65%;
    min-width: 370px;
    font-weight: 200;
    font-size: 10pt;
    color: #b1b1b1;
    line-height: 15pt;
    padding: 120px 50px 50px 50px;
    position: relative;
}

.ecampus .bottom-left img {
    max-width: 70vw;
    max-height: 65vh;
    bottom: 4%;
    position: absolute;
    z-index: 40;
}

.ecampus .top-right img {
    max-width: 60vw;
    height: auto;
    width: auto;
    max-height: 75vh;
    top: 8vh;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>

<div id="fullPage">
    <svg class="gridPage" preserveAspectRatio="none">
        <line x1="0" y1="50%" x2="100%" y2="50%" class="strokeGrid"/>
        <line x1="50%" y1="100%" x2="50%" y2="0" class="strokeGrid"/>
    </svg>
</div>

<div class="wrapper ecampus">
    <div class="top-left">

        <div class="corner-title">E-CAMPUS<span>.01</span></div>
        <div class="text-project">
            Sed mollis vestibulum aliquam. Morbi a sapien blandit, ornare ante in, hendrerit augue. Fusce euismod lacus
            a tempor mollis. Vestibulum posuere quam tellus, eleifend auctor mauris viverra at. Sed sapien justo,
            tincidunt in ullamcorper at, suscipit sed nunc. Vivamus nibh lectus, molestie sed lacus ut, tempus ultricies
            magna <br/><br/>
            Nam cursus tortor ut accumsan interdum. Integer sed lacinia tellus. Mauris dolor libero, aliquam vulputate
            tortor ac, finibus ultricies enim. <br/><br/>

        </div>
    </div>
    <div class="top-right">
        <nav>
            <ul class="cf">
                <li>
                    <a class="open-ecampus"><span class="active">01</span></a>
                    <ul class="dropdown">
                        <li><a class="open-ecampus">E-CAMPUS</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-pegasebuzz">02</a>
                    <ul class="dropdown">
                        <li><a class="open-pegasebuzz">PEGASEZBUZZ</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-notrecoin">03</a>
                    <ul class="dropdown">
                        <li><a class="open-notrecoin">NOTRE COIN</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <div class="bottom-left">
    </div>
    <div class="bottom-right"></div>
</div>

<div class="wrapper pegasebuzz">
    <div class="top-left">

        <div class="corner-title">PEGASEBUZZ<span>.02</span></div>
        <div class="text-project">
            PegaseBuzz is an application about horses, it was very important to visualize and design something which is
            interactive. <br/><br/>
            Créons un support qui vous ressemble, en vous apportant une présence en ligne, juste et pertinente, et
            surfez sur les vagues du web avec grâce et aisance. <br/><br/>
            Nous imaginons, pour vous, des supports visuels et interactifs, sur le web, en papier, vidéo ou encore en
            réalité virtuelle.
        </div>
    </div>
    <div class="top-right">
        <nav>
            <ul class="cf">
                <li class="open-ecampus">
                    <a class="open-ecampus">01</a>
                    <ul class="dropdown">
                        <li><a class="open-ecampus">E-CAMPUS</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-pegasebuzz"><span class="active">02</span></a>
                    <ul class="dropdown">
                        <li><a class="open-pegasebuzz">PEGASEZBUZZ</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-notrecoin">03</a>
                    <ul class="dropdown">
                        <li><a class="open-notrecoin">NOTRE COIN</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <img src="https://dummyimage.com/200x200/0011ff/0e0f00">

    </div>
    <div class="bottom-left">
        <img src="https://dummyimage.com/200x200/0011ff/0e0f00">
    </div>
    <div class="bottom-right"></div>
</div>

<div class="wrapper notrecoin">
    <div class="top-left">

        <div class="corner-title">NOTRE COIN<span>.03</span></div>
        <div class="text-project">
            Sed mollis vestibulum aliquam. Morbi a sapien blandit, ornare ante in, hendrerit augue. Fusce euismod lacus
            a tempor mollis. Vestibulum posuere quam tellus, eleifend auctor mauris viverra at. Sed sapien justo,
            tincidunt in ullamcorper at, suscipit sed nunc. Vivamus nibh lectus, molestie sed lacus ut, tempus ultricies
            magna <br/><br/>
            Nam cursus tortor ut accumsan interdum. Integer sed lacinia tellus. Mauris dolor libero, aliquam vulputate
            tortor ac, finibus ultricies enim. <br/><br/>

        </div>
    </div>
    <div class="top-right">
        <nav>
            <ul class="cf">
                <li>
                    <a class="open-ecampus">01</a>
                    <ul class="dropdown">
                        <li><a class="open-ecampus">E-CAMPUS</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-pegasebuzz">02</a>
                    <ul class="dropdown">
                        <li><a class="open-pegasebuzz">PEGASEZBUZZ</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-notrecoin"><span class="active">03</span></a>
                    <ul class="dropdown">
                        <li><a class="open-notrecoin">NOTRE COIN</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <img src="https://dummyimage.com/200x200/0011ff/0e0f00">

    </div>
    <div class="bottom-left">
        <img src="https://dummyimage.com/200x200/0011ff/0e0f00">
    </div>
    <div class="bottom-right"></div>
</div>

正如您在上一个代码段中看到的那样，您的代码存在一些差异：

使用轮子事件而不是鼠标轮暂时弃用
声明一个全局变量保存所有TweenMax实例的位置
在没有动画正在进行时清空此数组
在全局数组中保存TweenMax动画
针对TweenMax动画过滤全局数组

您的更新小提琴here

在启动等待动画完成后禁用函数一段时间

1 个答案: