Question

我在Javascript中有一个错误，我在其中设置父容器的margin left属性的动画，以便以下一种/上一种方式显示其子div。问题是如果以高频率点击“下一步”，if语句似乎被忽略（即仅在点击时有效，等待动画，然后再次点击）：

 if (marLeft === (-combinedWidth + (regWidth) + "px")) {

                           //roll margin back to 0

                        }

可以在jsFiddle上看到一个例子 - http://jsfiddle.net/ZQg5V/

任何帮助都将不胜感激。

Answer 1

尝试下面的代码，它将基本上检查容器是否正在动画，只是从函数返回。

工作demo

                 $next.click(function (e) {
                    e.preventDefault();

                    if($contain.is(":animated")){
                        return;
                    }

                    var marLeft = $contain.css('margin-left'),
                        $this = $(this);

                    if (marLeft === (-combinedWidth + (regWidth) + "px")) {
                        $contain.animate({
                            marginLeft: 0
                        }, function () {
                            $back.fadeOut('fast');
                        });
                    } else {
                        $back.fadeIn(function () {
                            $contain.animate({
                                marginLeft: "-=" + regWidth + "px"
                            });
                        });
                    }
                    if (marLeft > -combinedWidth) {
                        $contain.animate({
                            marginLeft: 0
                        });
                    }
                });

Answer 2

使用变量来跟踪动画是否正在发生。伪代码：

var animating = false;

function myAnimation() {
  if (animating) return;
  animating = true;     

  $(this).animate({what:'ever'}, function() {
    animating = false;
  });
}

原油，但它应该给你这个想法。

编辑：即使我按下按钮，您当前的代码也能正常工作。在Firefox上。

Answer 3

如果您创建一个处理动画的函数，而不是在每个事件处理程序（下一个，后一个）上编写动画代码，有时会更好。此外，用户无需等待动画完成即可进入第n页/框。

也许这会对你有所帮助：

if (jQuery) {
    var $next = $(".next"),
        $back = $(".back"),
        $box = $(".box"),
        regWidth = $box.width(),
        $contain = $(".wrap")
        len = $box.length;

    var combinedWidth = regWidth*len;

    $contain.width(combinedWidth);



    var currentBox = 0; // Keeps track of current box

    var goTo = function(n) {
        $contain.animate({
            marginLeft: -n*regWidth
        }, {
            queue: false, // We don't want animations to queue
            duration: 600
        });

        if (n == 0) $back.fadeOut('fast');
        else $back.fadeIn('fast');

        currentBox = n;
    };




    $next.click(function(e) {
        e.preventDefault();
        var go = currentBox + 1;
        if (go >= len) go = 0; // Index based, instead of margin based...
        goTo(go);
    });




    $back.click(function(e) {
        e.preventDefault();
        var go = currentBox - 1;
        if (go <= 0) go = 0; //In case back is pressed while fading...
        goTo(go);
    });

}

以下是您的jsFiddle的更新版本：http://jsfiddle.net/victmo/ZQg5V/5/

干杯！

javascript'over-click'错误

3 个答案: