資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用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+ 次瀏覽
廣告