jQuery动画边缘顶部

Question

我在jsfiddle上有一个脚本:http://jsfiddle.net/kX7b6/

悬停时没有任何反应

在悬停时,我希望绿色框与红色框重叠,边距为-50px.什么都没发生.

动画有效,但不是保证金

为了表明动画本身正在工作,我为动画增加了一个不透明度函数.就我所见,margin-top设置为0px内联.

Answer 1

你有MarginTop而不是marginTop

如果您离开动画中期,这也是非常错误的,这里是更新:

注意我将其更改为mouseenter,mouseleave因为当您将鼠标悬停在红色或绿色区域上时,我认为无意取消动画.

Answer 2

用'marginTop'而不是MarginTop

$(this).find('.info').animate({ 'marginTop': '-50px', opacity: 0.5 }, 1000);

Answer 3

使用更少的代码检查相同的效果

$(".item").mouseover(function(){
        $('.info').animate({ marginTop: '-50px' , opacity: 0.5 }, 1000);
    });