jQuery velocity complete callback is being call but function no

Question

I have a problem with this animation: 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);

If you place your mouse above the middle of the black circle, and the mouse fast until below the black circle, the animation get bug: the icon goes back to its place, but the text remains with opacity:1.

How is that possible if in the code, i'm only setting the position of the icon to its original position AFTER the text get opacity:0?

Answer 1

First you must STOP current animations then start new animations.
add $('.icon-container>*').velocity("stop") to your show and hide functions.

See [ THIS ] .

and it's not necessary to put the properties in quote. (use opacity, right instead of 'opacity', 'right')
and for changing your display value do this: (instead of show() hide() functions)
See the [ Documentation ]

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

Answer 2

Whenever I use Velocity for hover effects, I use the data attribute to ensure that the animation is doing the right thing. The answer from @MeTe-30 didn't perform very well for me. This solution might be a little more useful for you: 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);