我見過一些增長/縮小的jQuery動畫，如何做到這一點？

我見過一些使用jQuery Animate的網站，當它們被挖出時會讓它們的圖像長大，並在被摳掉時縮回原始大小。我試圖在一些圖像上做到這一點，但我不能完全正確地做到這一點。圖像大小爲60px×60px。我繼續刪除揮舞嘗試代碼，並提出了初步的代碼幫助： HTML：我見過一些增長/縮小的jQuery動畫，如何做到這一點？

<div id="icons"> 
    <ul> 
     <li><a href="services.php"><img src="img/asdf.jpg" alt="" /></a></li> 
     <li><a href="services.php"><img src="img/wasd.jpg" alt="" /></a></li> 
     <li><a href="services.php"><img src="img/dsdf.jpg" alt="" /></a></li> 
     <li><a href="services.php"><img src="img/wafds.jpg" alt="" /></a></li> 
    </ul> 
</div>

CSS：

#icons { 
margin: 0 auto; 
padding-top: 20px; 
width: 560px; 
} 

#icons ul li { 
display: inline; 
list-style-type: none; 
padding-right: 65px; 
}

來源

2012-02-29 beta208

顯然你會想調整所有的高度，寬度，頂部和左值，但這應該做的，你在找什麼...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Grow Shrink Demo</title> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

     <style> 
      #icons { 
       margin: 0 auto; 
       padding-top: 20px; 
       width: 560px; 
      } 

      #icons ul { 
       display: block; 
       height: 45px; 
       width: 560px; 
       overflow: hidden; 
       position: relative; 
      } 

      #icons ul li { 
       display: inline-block; 
       list-style-type: none; 
       width: 40px; 
       height: 40px; 
       overflow: hidden; 
       position: absolute; 
       top: 0px; 
      } 

      #icons img { 
       height: 20px; 
       width: 20px; 
       position: relative; 
       top: 10px; 
       left: 10px; 
      } 
     </style> 

     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#icons img').hover(function(){ 
        //handle mouse over 
        $(this).stop(); 

        $(this).animate({ 
         width: '26px', 
         height: '26px', 
         top: '7px', 
         left: '7px' 
        }, 200); 
       }, function(){ 
        //handle mouse out 
        $(this).stop(); 

        $(this).animate({ 
         width: '20px', 
         height: '20px', 
         top: '10px', 
         left: '10px' 
        }, 200); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 

     <div id="icons"> 
      <ul> 
       <li style="left: 20px;"><a href="services.php"><img src="/images/asdf.jpg" alt="" /></a></li> 
       <li style="left: 80px;"><a href="services.php"><img src="img/wasd.jpg" alt="" /></a></li> 
       <li style="left: 140px;"><a href="services.php"><img src="img/dsdf.jpg" alt="" /></a></li> 
       <li style="left: 200px;"><a href="services.php"><img src="img/wafds.jpg" alt="" /></a></li> 
      </ul> 
     </div> 

    </body> 
</html>

來源

2012-02-29 22:07:52

另外，在做相對和絕對定位時，我發現將大綱添加到所有容器元素，直到其全部定位正確爲止很有用......'outline：1px solid orange;'這比邊框效果更好，因爲大綱不會影響元素的實際寬度和/或高度，以及邊框。 – 2012-02-29 23:19:09

謝謝，我一直在使用邊界最長的時間，並調整寬度來回！ – beta208 2012-03-01 00:16:11

如果我理解正確你服用約變焦好吧，這個效應背後的概念是position: absolute圖片position: relative,overflow: hidden和固定width容器。然後，在hover()上，您將圖像的height和width設置爲動畫，同時將位置值的left和top屬性設置爲的負值一半。

來源

2012-02-29 21:54:31 elclanrs

嗯，你讓我在正確的軌道上，但我可能有誤措辭我想要什麼，所以我編輯我最初的職位。我試圖讓鼠標懸停在更長的時間（也許從50px到60px）超過一秒左右;那麼當鼠標懸停時（鼠標移出？），對象將返回到初始大小。我認爲這仍然需要一個相對定位的固定寬度的容器，溢出必須做什麼？你可以指點我的一些資源來編寫懸停（）正確（圖像60x60）？ – beta208 2012-03-01 00:24:08

在這裏，我創建了一個搗鼓你，幫助你開始：http://jsfiddle.net/5twM6/4/

這裏是文檔：

編輯：接近完整的解決方案

function grow(elem) 
{ 
    elem.animate({"width" : "+=10", "height":"+=10"}, 1000); 
} 
function shrink(elem) 
{ 
    elem.animate({"width" : "-=10", "height":"-=10"}, 1000); 
} 
$('.icons ul li img').mouseenter(function(){ 
    grow($(this)); 
}).mouseleave(function(){ 
    shrink($(this)); 
});

我的天堂」噸雖然測試它，但它應該可以幫助你進步...

來源

2012-02-29 21:58:05 mindandmedia

這確實有點幫助，我的對象是60px乘60px。我希望在被淹沒時讓它們長大一點。我認爲將它們從50px增加50px增加到60px60px會很好。 – beta208 2012-03-01 00:17:35

只需做$（this）.animate（{「width」：「 - = 10」，「height」：「 - = 10」}，1000，function（）{$（this）.animate（{「width」：「+ = 10」，「height」：「+ = 10」}，1000））;' – mindandmedia 2012-03-01 00:21:24

那麼我該如何讓它在被摳出後回到初始大小？ – beta208 2012-03-01 00:41:37

我見過一些增長/縮小的jQuery動畫，如何做到這一點？

回答

相關問題