Question

当用户点击图片或箭头时，我有一个带滑动图像的小导航菜单。通过使用.5s css转换在png图像文件上更改背景位置来滑动图像。

当用户点击菜单时，我抓住元素的x位置＆amp;增加它。这需要0.5秒才能完成，所以如果用户在图像移动时双击，则会通过将其更改两次来扰乱css位置。

我认为最好的解决方案是让用户在.5s内双击这些按钮，有没有办法做到这一点？

以下是 JS

的相关摘录

    function getXAxis (div, val){
        var x_axis = div.css("background-position");
        x_axis = x_axis.split("px");
        x_axis = x_axis[0];
        x_axis = parseInt(x_axis);
        x_axis = x_axis + val;
        return x_axis;
    }

    function rotateControlsRight(){
        x = getXAxis(hpLeftArrow, 9);
        hpLeftArrow.css("background-position", x+"px 0px");
        x = getXAxis(hpPosition1, 57);
        hpPosition1.css("background-position", x+"px -2px");
        x = getXAxis(hpPosition2, 65);
        hpPosition2.css("background-position", x+"px -1px");
        x = getXAxis(hpPosition3, 57);
        hpPosition3.css("background-position", x+"px -2px");
        x = getXAxis(hpRightArrow, 9);
        hpRightArrow.css("background-position", x+"px -15px");
        console.log("moving RIGHT by "+x);

    }

    function rotateControlsLeft(){
        x = getXAxis(hpLeftArrow, -9);
        hpLeftArrow.css("background-position", x+"px 0px");
        x = getXAxis(hpPosition1, -57);
        hpPosition1.css("background-position", x+"px -2px");
        x = getXAxis(hpPosition2, -65);
        hpPosition2.css("background-position", x+"px -1px");
        x = getXAxis(hpPosition3, -57);
        hpPosition3.css("background-position", x+"px -2px");
        x = getXAxis(hpRightArrow, -9);
        hpRightArrow.css("background-position", x+"px -15px");
        console.log("moving Left by "+x);

    }


    hpLeftArrow.click(function(){
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition > 1 ){
            -- hpSlidePosition;
        } else {
            hpSlidePosition = 1;
        }
        hpMovingRight = false;
        rotateControlsLeft();

        hpInitSlide()

    });

    hpRightArrow.click(function(){
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition < 3 ){
            ++ hpSlidePosition;
        } else {
            hpSlidePosition = 3;
        }
        hpMovingRight = true;
        rotateControlsRight();

        hpInitSlide()
    });

Answer 1

我建议你宣布一些＆＃34;正在进行中＆＃34;旗？例如，在onclick处理程序中设置一些全局变量，并在动画结束时重置它。

Answer 2

最好的方法是检查元素是否为动画，如果是，则跳过该函数：

var leftCheck=false;
hpLeftArrow.click(function(){
    if(!leftCheck){
        leftCheck=true;
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition > 1 ){
            -- hpSlidePosition;
        } else {
            hpSlidePosition = 1;
        }
        hpMovingRight = false;
        rotateControlsLeft();

        hpInitSlide();
        setTimeout(function(){
            leftCheck=false;
        },500);
    }
    });
    var rightCheck=false;
    hpRightArrow.click(function(){
      if(!rightCheck){
        rightCheck=true;
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition < 3 ){
            ++ hpSlidePosition;
        } else {
            hpSlidePosition = 3;
        }
        hpMovingRight = true;
        rotateControlsRight();

        hpInitSlide();
        setTimeout(function(){
            rightCheck=false;
        },500);
      }
    });

Answer 3

您可以定义一个变量，告知动作（左或右）状态是否完成。

var motionComplete = true;

hpLeftArrow.click(function(){
       if(motionComplete) // check complete or not
      {
        motionComplete = false;// set motion started
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition > 1 ){
            -- hpSlidePosition;
        } else {
            hpSlidePosition = 1;
        }
        hpMovingRight = false;
        rotateControlsLeft();

        hpInitSlide(); // you missed semicolon here
        motionComplete = true;// set motion complete
      }
    });

    hpRightArrow.click(function(){
     if(motionComplete)// check complete or not
      {
        motionComplete = false;// set motion started
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition < 3 ){
            ++ hpSlidePosition;
        } else {
            hpSlidePosition = 3;
        }
        hpMovingRight = true;
        rotateControlsRight();

        hpInitSlide(); // you missed semicolon here
        motionComplete = true;// set motion complete
      }
    });

Answer 4

方法1：我不是很确定这一点，但应该有效。处理单击的处理程序检查event.type。

如果event.type ==“dblclick”
则返回

方法2：就像我面前的人回答。启用标志，然后在动画完成后将其禁用。据我所知，有一个回调指示动画完成或可能是一个jquery回调

方法3：当您注册click事件时，将其注册到className，如class =“slideOnClick”，即$（document）.on（“click”，“。slideOnClick”，handler）;记得不要使用$（“。slideOnClick”）。on（“click”）; 在您开始动画后删除className，并在动画完成后添加className。这样，当用户双击第一次单击导致动画时，第二次单击不会直到动画完成并且添加了className。

方法4：在要动画的元素上有data- *属性。假设data-animationState =“idle”/“progress”/“complete”。并且仅在data-animationState！=“progress”

时应用动画

方法5：与方法3类似，但不是更改单击的元素的className，而是更改正在设置动画的元素的className，即将动画应用于class =“animateElement”，并在进行中将其更改为class =“animateElementInProgress”并在完成更改后返回class =“animateElement”

Answer 5

感谢您的所有帮助，最后我使用变量来存储幻灯片的状态，如果幻灯片处于活动状态，则将其设置为true，然后在.5s后将其设置为false

var rotateFlag = false;
function rotateControlsLeft(){
    if(!rotateFlag){
        x = getXAxis(hpLeftArrow, -9);
        hpLeftArrow.css("background-position", x+"px 0px");
        x = getXAxis(hpPosition1, -57);
        hpPosition1.css("background-position", x+"px -2px");
        x = getXAxis(hpPosition2, -65);
        hpPosition2.css("background-position", x+"px -1px");
        x = getXAxis(hpPosition3, -57);
        hpPosition3.css("background-position", x+"px -2px");
        x = getXAxis(hpRightArrow, -9);
        hpRightArrow.css("background-position", x+"px -15px");
        rotateFlag = true;
        setTimeout(function(){
            rotateFlag=false;
        },500);
    }

停止鼠标用javascript双击某些元素

5 个答案: