Question

此网站的“精选项目”部分中有动画效果here。

我正在尝试为我的网站制作这个，我实际上是在一个月前开始做的。但现在令人惊讶的是，它根本不起作用，而且对于我弄清楚问题可能是什么有点模棱两可。

我选择了错误的库，我的脚本中是否存在问题，还是错误？

HTML

      <a class="MainMiddleTwoEach MMTE1"  href="#" title="This is the title 1">
           <label class="MainMiddleTwoLabel1"></label>
           <span class="MainMiddleTwoLabel2"></span>    
      </a>

JS。

      $('.MainMiddleTwoEach').mouseenter(function (e) {
            pageId = $(this).attr('href');
            $(this).children('label').animate({ top: '150px' }, 300);
            $(this).children('label').animate({ top: '-100px' }, 300);
            $(this).children('span').animate({ top: '20px' }, 300);
            $(this).children('span').animate({ top: '230px' }, 300);
        }).mouseleave(function (e) {
            $(this).children('label').animate({ top: '130px' }, 300);
            $(this).children('label').animate({ top: '80px' }, 300);
            $(this).children('span').animate({ top: '-10px' }, 300);
            $(this).children('span').animate({ top: '55px' }, 300);
        });

http://jsfiddle.net/K4Ak2/3

Answer 1

您需要将元素的位置设置为relative或absolute才能使用top，right，bottom或{ {1}}属性。

点击此处的我的编辑：http://jsfiddle.net/K4Ak2/4/

我在CSS中添加了一行

left

它应该按预期工作。

Answer 2

来自Animate的jQuery api：http://api.jquery.com/animate/

方向属性（顶部，右侧，底部，左侧）无法辨别如果元素的位置样式属性是静态的，则对元素产生影响它是默认的。

您可以尝试将位置设置为“相对”

Jquery Animate（）不工作

2 个答案: