1

我对这个动画有疑问：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。

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

4

2 回答 2

2

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

见[这个]。

并且没有必要将属性放在引号中。（使用 opacity, right 代替 'opacity', 'right'）
并且要更改显示值，请执行以下操作：（而不是 show() hide() 函数）
请参阅[文档] 

$elm.velocity({
    ...
},{
    display: 'none' //or 'block'
});
于 2014-08-09T06:21:05.890 回答
1

每当我将 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);
于 2015-04-16T19:15:04.993 回答