Question

我正在尝试制作一个图库，点击缩略图图像然后打开图像刚刚缩放，然后我在图像旁边添加箭头以便能够导航，问题是当你点击第一个箭头时时间一切都很好，但点击后面的时间越多就会开始动作，例如，如果你第一次点击，如果点击八次箭头，它会立即淡出图像，它会在2秒后淡出图像。

arrows.on('click', function(){
  if(action === false){
  action = true;
  if($(this).hasClass("left")){
    if(parseInt(curr_img) - 1 > 0){
        curr_img--;
    }else{
        curr_img = 12;
    }
    $(".premii").fadeTo("fast", 0, function(){
        $(this).children("img").attr("src", path + curr_img + '.jpg');
        if(diploma['diploma_' + curr_img].pos === "ver"){
            if(!$(this).children("img").hasClass("ver")){
            $(this).children("img").addClass("ver");
        }
        }else{
            $(this).children("img").removeClass("ver");
        }
        $(this).children("img").load(function(){
            curr_height = $(".premii").height();
            $(".premii").fadeTo("fast", 1, function(){
                action = false;
            });
        });
    });
}

Answer 1

每次执行$(this).children("img").load时，另一个Load-Eventhandler会附加到div内的图像上。但是每次单击按钮时都会执行不断增加的事件处理程序堆栈。所以你必须改变
.load(function()
到 .one("load", function()
这为图像添加了一次性事件处理程序。这是一个干净的方法，而不仅仅是停止动画队列。

Click事件开始动画迟到

1 个答案: