0

こんにちは、私は次の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});  
    });  

});
4

2 に答える 2

1

望ましい効果は次のとおりです。

http://jsfiddle.net/tHDa4/

$('.portfoliobox').hover(function () {
  $(".rollover").stop().animate({ marginTop: '80px' }, 160);
}, function () {
  $(".rollover").stop().animate({ marginTop: '300px' }, 160);
});
于 2013-01-11T18:31:04.103 に答える
0

margin-topはmarginTopと言うべきです...そうは言っても、私はあなたがフィドルで持っているものを試しました、そしてそれはいくつかのファンキーなことをします。

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

また、jsfiddleナッツを作っているので「これ」を取り出しました。

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

于 2013-01-11T16:02:35.817 に答える