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

首先，您必须STOP当前动画然后开始新的动画将$('.icon-container>*').velocity("stop")添加到您的节目并隐藏功能。

见[ THIS ]。

并且没有必要将属性放在引用中。（使用不透明度，而不是＆＃39;不透明度＆＃39;，＆＃39;右＆＃39;）
并且要更改显示值，请执行以下操作:(而不是show（）hide（）函数）
请参阅[ Documentation ]

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

Answer 2

每当我使用Velocity进行悬停效果时，我都会使用data属性来确保动画做得正确。 @ MeTe-30的答案对我来说并不是很好。此解决方案可能对您更有用：DEMO

var container = $('.icon-container');
var icon = container.find('p');
var text = container.find('span');
var group = icon.add(text);

container.data({animating:false}); // add data for animation queue purposes

function showIconPicture() {

/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/

if (container.data('animating') === true){
    icon.velocity("stop", true).velocity('reverse',{ duration:0});
    container.data({animating:false});
} else { // begin default animation
    icon.velocity({right :60, opacity: 1},{
        duration:300,
        begin: function(){
            container.data({animating:true});
        },
        complete: function() {
            text.velocity({ opacity:1 }, {duration: 300, delay: 0});
            container.data({animating:false});
        }
    });
} // end of conditional statement

} // end of function

function hideIconPicture() {

/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/

if (container.data('animating') === true){
    icon.velocity("stop", true).velocity('reverse',{ duration:0});
    container.data({animating:false});

} else { // begin default animation

    icon.velocity({ right: 0, opacity:0 }, {
        duration:200,
        begin: function(){
            container.data({animating:true});
        },
        complete: function(){
            group.velocity({ opacity:0 },{ duration:200 });
            container.data({animating:false});
        }
    });

} // end of conditional statement
} // end of function


$(".cover-profile").hover(showIconPicture, hideIconPicture);

正在调用jQuery速度完成回调但函数号

2 个答案: