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);
    }
  );
});

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

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

将鼠标悬停在<a>元素上后，显示隐藏的<span>，将其位置设置为“left：30px”。
将位置设置为“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');
            });
        }
    });
});

FIDDLE

jQuery动画显示和移动元素

1 个答案: