本站“特色项目”部分有动画效果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);
});
最佳答案
您需要将元素的位置设置为relative
或absolute
才能使用top
、right
、bottom
或 left
属性。
在这里查看我的编辑:http://jsfiddle.net/K4Ak2/4/
我在 CSS 中添加了一行
label, span { position: relative; }
它应该按预期工作。
关于Jquery Animate() 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15429553/