3

在此站点的“特色项目”部分有一个动画效果。

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

我选择了错误的库，我的脚本是否有问题，或者它是一个错误？

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

4

2 回答 2

8

您需要将元素的位置设置为relativeorabsolute才能使用、top或right属性。bottomleft

在这里查看我的编辑：http: //jsfiddle.net/K4Ak2/4/

我在 CSS 中添加了一行

label, span { position: relative; }

它应该按预期工作。

于 2013-03-15T10:12:25.020 回答
3

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

方向属性（上、右、下、左）如果元素的位置样式属性是静态的（默认情况下是静态的），则对元素没有明显的影响。

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

于 2013-03-15T10:22:12.133 回答