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

【问题标题】：Trying to convert an animation from css3 to jquery, reaching walls everywhere试图将动画从 css3 转换为 jquery，到处都是墙壁
【发布时间】：2012-12-26 05:26:03
【问题描述】：

您好，我正在尝试将以下 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});  
    });  

});

【问题讨论】：

你试过的 jQuery 代码在哪里？
用已经尝试过的代码编辑了帖子。它破坏了页面上的所有其他脚本并且没有工作。
{margin-top:'220px'} 语法无效，您的代码无法编译，可能是{"margin-top":'220px'}，或{marginTop: '220px'}

标签： jquery html css jquery-animate css-transitions

【解决方案1】：

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

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

另外，我把“这个”去掉了，因为它让 jsfiddle 变得疯狂。

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

【讨论】：

【解决方案2】：

这是想要的效果：

http://jsfiddle.net/tHDa4/

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

【讨论】：