📌  相关文章
📜  jQuery fadein()(1)

📅  最后修改于: 2023-12-03 14:43:09.052000             🧑  作者: Mango

jQuery fadein()

jQuery fadein()是一个用于渐渐地显示HTML元素的jQuery方法，可以使元素从不可见到可见，并可以结合其他效果，如动画和回调函数等。

用法

基本语法如下：

$(selector).fadeIn(speed, callback);

其中selector表示要进行渐入效果的HTML元素，speed表示渐入的速度，callback表示动画完成后要执行的函数。

参数
  • speed：渐入的速度，可以是毫秒值（如1000毫秒）或者是一个预定义的字符串，如"slow"（600毫秒）和"fast"（200毫秒）。
  • callback：动画完成后要调用的函数，可以是一个已经定义的函数名或者是一个匿名函数。
示例

以下示例将在单击按钮后使元素渐入：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").fadeIn();
  });
});
</script>
</head>
<body>

<button>点击渐入</button>
<br><br>
<div style="display:none;width:50px;height:50px;background-color:red;"></div>

</body>
</html>

在这个例子中，我们首先使用jQuery的document.ready()函数来确保DOM已经加载完毕。然后我们在按钮单击事件处理函数中使用.fadeIn()方法将div元素渐入。最后，我们将div元素的display属性设置为none，使其在初始状态下不可见。

注意事项
  • 如果要使用.fadeIn()方法使一个元素渐入，需要先将其display属性设置为none，否则渐入效果将无法正常显示。
  • 要在元素渐入之前对其进行任何操作（如修改其样式或添加新内容等），需要确保该操作在.fadeIn()方法被调用之前完成。
  • 在.fadeIn()方法中使用字符串"fast"或"slow"可以使渐入效果速度变慢或变快。
  • 可以使用.fadeTo()方法来设置元素渐入到特定的透明度，而不是完全显示。