用CSS懸停動畫div div

我正在嘗試使用CSS3的@keyframes規則懸停懸停div。動畫的代碼位於this page的最底部（緊接在慷慨標註的「HERE BE ANIMATION」評論ASCII藝術之後）。這包括@keyframes規則，div和div：hover。我想要這個動畫的頁面是right here。出於某種原因，動畫不起作用;這是我第一次嘗試使用CSS動畫，所以可能會出現一些新手的錯誤。用CSS懸停動畫div div

來源

2012-04-12 Jules

任何瀏覽器都不支持@keyframes規則。 Firefox支持替代方法，即@ -moz-keyframes規則。 Safari和Chrome支持替代的@ -webkit-keyframes規則。你確定你還需要惹這個嗎？ =） – 2012-04-12 01:10:23

我認爲@ -webkit-keyframes規則已經在那裏了;我放棄了-moz，因爲Dreamweaver沒有將它識別爲有效的@keyframes變體。但我在Chrome中測試了該頁面，並且不顯示動畫。 – Jules 2012-04-12 01:26:10

我想你留下了一個指向你感興趣的實際頁面的問題鏈接 – 2012-04-12 01:59:30

如果您試圖將div的動畫從0px設置爲200px，那麼使用jQuery解決方案要容易得多。與@keyframe相比，jQuery提供了跨瀏覽器兼容性，僅在Safari和Chrome中受支持。

下面是一個例子：http://jsfiddle.net/ZgcxL/

編輯：

如果你不希望你的用戶僅限於Chrome和Safari做，你一定要考慮的jQuery。使用非常簡單。只需在您的<head></head>標籤之間添加此代碼即可。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.macanimation').hover(function() { 
     $(this).animate({top: '200px'}); 
    }); 
    }); 
</script>

編輯2：

忘的document.ready（）。重新粘貼上面的代碼。同時添加位置：絕對;到你的div，並添加'px'到你的寬度：

div.macanimation { 
    position: absolute; 
    width:960px; 
    height:500px; 
    padding-left:40px; 
    padding-right:40px; 
    margin:auto; 
    background-image:url(/Photos/MacHQ.png); 
}

測試，工作。

來源

2012-04-12 01:19:58

我很喜歡，但是我對jQuery的瞭解要少於我對CSS3的瞭解（因爲我從來沒有使用它）。如果這是唯一可能的解決方案，我會嘗試一下;否則，我寧願堅持CSS3。 – Jules 2012-04-12 01:27:37

其實，我剛剛把最新的jquery.js放到了我的根目錄/ js文件夾中，並且我已經準備好了jQuery。我在哪裏放置這個腳本？ $（'div'）.hover（function（）{ $（this）.animate（{top：'200px'}）; }）; – Jules 2012-04-12 01:37:18

看到我編輯的答案。 – 2012-04-12 01:37:22

用CSS懸停動畫div div

回答

相關問題