jQuery动画显示和移动元素

Question

下面是我制作的一个小工作脚本。看看here

$(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>元素后，显示被隐藏的<span>，动画的位置，以“左：30PX”。
2. 将位置动画为“底部：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'); 
      }); 
     } 
    }); 
}); 

FIDDLE