Question

我正在尝试使用jquery构建幻灯片。旋转下一个图像的动画需要1秒钟，滑块还有下一个和上一个控件。在动画进行过程中是否可以阻止下一个和上一个控件发射？

Answer 1

使用全局变量（例如var animating = false）来指示动画的状态。

动画开始时将其设置为true，并在动画结束时（在回调函数中）将其设置为false。

在prev和next函数中，只需检查animating即可。如果是真的，除了返回外什么都不做。

Answer 2

这里不知道你的代码是一个基本的方法：

为beginlide和endslide注册事件，并将变量slideInProgress分别设置为true和false。让你的上一个和下一个控件检查幻灯片是否正在进行中，如果slideInProgress为真，则禁止它。

Answer 3

http://jsfiddle.net/R3aJS/ - 工作小提琴，您可以通过在图像元素上调用动画函数来隐藏取消隐藏控件。我想我很无聊，想要扩展viclm的答案：）

  $("document").ready(function(){

        var direction=0;
        $("img").hide();
        $('.direction').click(function() {
            if ($(this).attr('id') == -1) {
                if (direction != 0) {
                    direction --;
                }
                runAnimation($("img:eq("+direction+")"));
            } else {
                if (direction == $("img").length-1) {
                    direction = 0; //go back to the start why not
                } else {
                    direction ++;            }
                runAnimation($("img:eq("+direction+")"));
            }    
        });

    });

    function runAnimation (something) {
        $('.direction').hide();
        $(something).toggle();
         $(something).animate({
            opacity: 0.25,
            left: '+=50',
            height: 'toggle'
          }, 2000, function() {
            $('.direction').show();
          });
    }

<div class="gallery">
    <img width="150px" height="150px" src="http://survivalgaming.co.uk/images/star1.jpg"/>
    <img width="150px" height="150px" src="http://images.pictureshunt.com/pics/s/star-2192.jpg"/>
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/commons/9/97/Esperanto_star.png"/>
</div>
<span class="direction" id="-1">Prev</span> <span class="direction" id="1">Next</span>

在函数执行时阻止元素上的事件触发

3 个答案: