要通過jQuery的trigger()
方法實現動畫效果,首先你需要在你的HTML元素上添加相應的動畫效果,然后使用trigger()
方法觸發這個效果。以下是一個簡單的示例:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div>
,并為其添加一個類名(如animated-box
):<div class="animated-box"></div>
.animated-box
添加一個簡單的淡入淡出效果:.animated-box {
width: 100px;
height: 100px;
background-color: red;
opacity: 0;
transition: opacity 1s;
}
.animated-box.fade-in {
opacity: 1;
}
.animated-box.fade-out {
opacity: 0;
}
.animated-box
元素添加動畫效果,并使用trigger()
方法觸發:$(document).ready(function() {
// 添加淡入效果
$(".animated-box").addClass("fade-in");
// 在1秒后觸發淡出效果
setTimeout(function() {
$(".animated-box").addClass("fade-out").trigger("fadeOut");
}, 3000);
});
在這個示例中,我們首先為.animated-box
元素添加了.fade-in
類以實現淡入效果。然后,我們使用setTimeout()
函數在1秒后為該元素添加.fade-out
類并觸發fadeOut
事件。這將導致元素執行淡出動畫。你可以根據需要調整動畫時長、延遲以及要觸發的動畫類型。