javascript - 正在调用 jQuery velocity complete 回调但函数没有

Question

我对这个动画有疑问: http://jsfiddle.net/pietrofxq/6kjnnkqx/

function hideIconPicture() {
  self = $(this);
  var p = self.find("p");
  self.find("span").velocity("stop").velocity({
    "opacity":0
  },{
    duration:100,
    complete: function() {
      p.velocity({"right":"0"}, {
        duration:100,
        delay:100
      })
    }
  })
}

function showIconPicture() {
  var self = $(this);
  var p = self.find("p");
  p.velocity({
    "right":"60px",
  }, {
    duration:100,
    complete: function() {
      self.find("span").show().velocity({
        "opacity":1
      },100)
    }
  });
}


$(".uploadPicture .icon-container").hover(showIconPicture, hideIconPicture);

如果您将鼠标放在黑色圆圈的中间上方，并且鼠标快速移动到黑色圆圈下方，动画会出现错误:图标返回到它的位置，但文本保持不透明度:1。

如果在代码中，我只是在文本获得不透明度:0 后将图标的位置设置为其原始位置，这怎么可能？

Answer 1

首先你必须停止当前的动画，然后开始新的动画。
将 $('.icon-container>*').velocity("stop") 添加到您的显示和隐藏功能。

参见 [ THIS ] .

并且没有必要将属性放在引号中。 (使用 opacity, right 而不是 'opacity', 'right')
要更改显示值，请执行以下操作:(而不是 show() hide() 函数)
查看[ Documentation ]

$elm.velocity({
    ...
},{
    display: 'none' //or 'block'
});