jquery - 试图将动画从 css3 转换为 jquery，到处都是墙壁

Question

您好，我正在尝试将以下 css3 动画转换为 jquery，但运气不佳：

    .portfoliobox .rollover
{
    height: 220px;
    width: 100%;
    background: url(../img/rolloverbg.png);
    margin-top: 220px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    overflow: hidden;
}
.portfoliobox:hover .rollover
{
    float: left;
    margin-top: 100px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    overflow: hidden;
}

效果可以看这里：http ://www.astwood.co.uk/testsite/wordpress/

有人可以帮帮我吗？

编辑：我已经尝试过的代码

$(document).ready(function(){   

    $('.portfoliobox').hover(function(){  
        $(".rollover", this).stop().animate({margin-top:'220px'},{queue:false,duration:160});  
    }, function() {  
        $(".rollover", this).stop().animate({margin-top:'100px'},{queue:false,duration:160});  
    });  

});

Answer 1

这是想要的效果：

http://jsfiddle.net/tHDa4/

$('.portfoliobox').hover(function () {
  $(".rollover").stop().animate({ marginTop: '80px' }, 160);
}, function () {
  $(".rollover").stop().animate({ marginTop: '300px' }, 160);
});

Answer 2

margin-top 应该说 marginTop ......也就是说，我尝试了你在小提琴中所拥有的东西，它做了一些 FUNKY 的东西。

$(".rollover").stop().animate({marginTop:'220px'},{queue:false,duration:160});

另外，我取出了“this”，因为它使 jsfiddle 变得疯狂。

http://jsfiddle.net/MatthewDavis/qDnC7/3/