jquery - jQuery 动画显示和移动元素

Question

下面是我制作的一个小型工作脚本。看看这里

$(document).ready(function () 
{
  $("ul li a").hover(function () 
  {
    $("span", this).fadeIn('fast');
    $("label", this).fadeIn('fast');
  },
    function () 
    {
        $("span", this).fadeOut(500);
        $("label", this).fadeOut(500);
    }
  );
});

我一直在尝试做的是使用一些简单的动画功能将此效果更改为动画，但我只是没有得到正确的结果。

我正在尝试做的一个例子是：

1. 悬停在<a>元素上后，显示 hidden <span>，将其位置设置为“left：30px”。
2. 将位置设置为 "bottom:100px" 。

我将不胜感激任何与此相关的建议、解决方案或教程。

Answer 1

$(document).ready(function () {
    $("ul li").on({
        mouseenter: function() {
            var self = this;
            $("span, label", this).fadeIn('fast', function() {
                $(this).stop().animate({
                    left: 30,
                    top : $(self).height() - 100
                }, 400);
            });
        },
        mouseleave: function() {
            var self = this;
            $("span, label", this).stop().animate({
                    left: -30,
                    top : 0
            }, 400, function() {
                $(this).fadeOut('fast');
            });
        }
    });
});

小提琴