試圖動畫從CSS3轉換爲jQuery的，達到了牆上到處

你好我想下面的CSS3動畫jQuery的轉換，但沒有多少運氣：試圖動畫從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}); 
    }); 

});

來源

2013-01-11 Alex Sadler

其中jQuery的代碼，你試過嗎？ –

用已經試過的代碼編輯帖子。它打破了頁面上的所有其他腳本，並且不起作用。 –

'{margin-top：'220px'}'語法無效，您的代碼無法編譯，可能是'{「margin-top」：'220px'}'，或者{{marginTop：'220px'}' –

這裏是預期的效果：

http://jsfiddle.net/tHDa4/

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

來源

2013-01-11 18:31:04

邊距應該說marginTop ......這麼說，我想你在搗鼓有沒有出來，但做一些時髦的東西。

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

此外，我拿出了「這個」，因爲它使jsfiddle堅果。

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

來源

2013-01-11 16:02:35

試圖動畫從CSS3轉換爲jQuery的，達到了牆上到處

回答

相關問題