如何使用jQuery在滑鼠懸停時動畫化div的寬度和高度？

我們可以透過在懸停時將animate()方法應用於div來動畫化div的寬度和高度。我們可以指定所需的寬度和高度值以及動畫持續時間。此外，我們還可以新增一個回撥函式，以便在動畫完成後執行其他操作。

jQuery是一個JavaScript庫，它可以輕鬆地為網頁新增互動元素。jQuery旨在簡化向網頁新增動態內容的過程，並簡化跨不同瀏覽器執行程式碼的過程。jQuery還提供許多功能，使建立響應式和移動友好的Web應用程式變得容易。

方法

有幾種不同的方法可以實現使用jQuery在滑鼠懸停時動畫化div的寬度和高度。

  • 一種方法是使用jQuery的.hover()方法，該方法允許您指定兩個函式，分別在滑鼠進入和離開元素時執行。在滑鼠進入時執行的函式中，您可以使用jQuery的.animate()方法來動畫化div的寬度和高度。例如：

$("#someDiv").hover(function() { $(this).animate({ width: "100px", height: "100px" }, "slow"); }, function() { $(this).animate({ width: "50px", height: "50px" }, "slow"); });

示例

<!DOCTYPE html>
<html>
<head>
   <title>Animate DIV</title>
</head>
   <body>
      <div id='animate' style="color:black; background:red">hello  world</div>
      <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      <script>    
         jQuery("#animate").hover(
            function(){
               jQuery(this).animate({width: "300px", height: "300px"});
            },
            function(){
               jQuery(this).animate({width: "100px", height: "100px"});
            }
         );   
      </script>
   </body>
</html>

更新於：2023年2月13日

1000+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告