平滑的圖像大小調整使用jQuery .animation和規模

基本上我試圖創建一個平滑的動畫。當.mouseenter被觸發時，圖像會擴大到其尺寸的兩倍，當鼠標被觸發時，圖像將平滑過渡到原始尺寸。平滑的圖像大小調整使用jQuery .animation和規模

我已經達到了這個使用CSS和.addclass和卸下襬臂類，但對於這個技能培養練習吧的目的，我要回並庫存的jQuery改寫它。我沒有寫的.mouseleave功能又爲我不可能找出.mouseenter

但我清楚地寫.mouseenter事件錯誤。

<!doctype html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <link href="stylesheets/960_12_col.css" rel="stylesheet"> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <style> 
     body { 
      font-size:62.5%; 
      background:url('images/vintageocean.jpg')no-repeat repeat center fixed; 
     } 

     #gallery { 
      padding-top:10em; 
     } 


     .first_row { 
      margin-bottom:15em; 
     } 

    </style> 

    <script> 

    $(document).ready(function() { 
     $(".image").css({width : '20em', height : '20em'}); 

     $("image").mouseenter(function() { 
      $(this).stop().animate({transform, scale(2)}, 3000); 
     }); 
    }); 



    </script> 
</head> 
<body> 
    <div id="wrapper" class="container_12"> 

     <section id="gallery">   
      <img id="avery" class=" image first_row prefix_2 grid_3 suffix_1" src='images/OAI.jpg' alt= "On Avery Island Album Art"> 
      <img id="overthesea" class=" image first_row prefix_1 grid_3 suffix_2" src='images/ITAOTS.jpg' alt="In the Aeroplane Over the Sea album art"> 
      <img id="beauty" class=" image second_row prefix_2 grid_3 suffix_1" src='images/beauty.jpg' alt="Beauty Demo Album Art"> 
      <img id="everthingIs" class=" image second_row prefix_1 grid_3 suffix_2" src='images/everythingis.jpg' alt="Eveything Is EP Album Art"> 
     </section> 
    </div> 
</body>

來源

2013-10-30 nope

編輯：嗯，我才意識到，因爲我使用的是網格系統我不需要真正定義長度和寬度...我想 – nope

有一些事情是你的代碼錯誤。首先，你是在一個名爲image所有標籤而不是類綁定您的MouseEnter事件（將其更改爲$('.image')）。

其次，你的對象，你送入你的動畫功能，必須在形式鍵：值和值必須是原始類型，因此您需要將您的動畫更改爲

$(this).stop().animate({transform:'scale(2)'}, 3000);

爲了使它有效的JavaScript。

然而，在這種情況下，它仍然無法正常工作，因爲有生只支持數值，爲什麼動畫轉換根本不起作用。可能有一些jQuery插件可以解決這個問題，但我很遺憾沒有意識到這一點。

雖然我已經看到一些hacking動畫的一些任意屬性，然後用一個匿名函數手動更改轉換，但坦率地說，我認爲這是錯誤的方式去和不必要的複雜的東西，可以輕鬆地用CSS來完成。

來源

2013-10-30 09:28:33

謝謝你，還有很多的插件，我發現，我只是想做到這一點不使用任何。我可以使用轉運或jquery UI插件輕鬆地做到這一點，我相信 – nope

平滑的圖像大小調整使用jQuery .animation和規模

回答

相關問題